HouYunFei
fb79a15508
- 添加 sections 定义文件，包含性能优化各领域分类 - 添加规则模板文件，规范文档结构和标签定义 - 添加异步操作优化规则，包括防止瀑布流、并行化、延迟等待等 - 添加包大小优化规则，包括避免桶式导入、动态导入、预加载等 - 添加服务端性能优化规则，包括 API 路
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.