fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.0 KiB
2.0 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Avoid Duplicate Serialization in RSC Props | LOW | reduces network payload by avoiding duplicate serialization | server, rsc, serialization, props, client-components |
Avoid Duplicate Serialization in RSC Props
Impact: LOW (reduces network payload by avoiding duplicate serialization)
RSC→client serialization deduplicates by object reference, not value. Same reference = serialized once; new reference = serialized again. Do transformations (.toSorted(), .filter(), .map()) in client, not server.
Incorrect (duplicates array):
// RSC: sends 6 strings (2 arrays × 3 items)
<ClientList usernames={usernames} usernamesOrdered={usernames.toSorted()} />
Correct (sends 3 strings):
// RSC: send once
<ClientList usernames={usernames} />;
// Client: transform there
('use client');
const sorted = useMemo(() => [...usernames].sort(), [usernames]);
Nested deduplication behavior:
Deduplication works recursively. Impact varies by data type:
string[],number[],boolean[]: HIGH impact - array + all primitives fully duplicatedobject[]: LOW impact - array duplicated, but nested objects deduplicated by reference
// string[] - duplicates everything
usernames={['a','b']} sorted={usernames.toSorted()} // sends 4 strings
// object[] - duplicates array structure only
users={[{id:1},{id:2}]} sorted={users.toSorted()} // sends 2 arrays + 2 unique objects (not 4)
Operations breaking deduplication (create new references):
- Arrays:
.toSorted(),.filter(),.map(),.slice(),[...arr] - Objects:
{...obj},Object.assign(),structuredClone(),JSON.parse(JSON.stringify())
More examples:
// ❌ Bad
<C users={users} active={users.filter(u => u.active)} />
<C product={product} productName={product.name} />
// ✅ Good
<C users={users} />
<C product={product} />
// Do filtering/destructuring in client
Exception: Pass derived data when transformation is expensive or client doesn't need original.