wehub-skill-sync
39 lines
1021 B
Markdown
39 lines
1021 B
Markdown
---
|
|
title: Minimize Serialization at RSC Boundaries
|
|
impact: HIGH
|
|
impactDescription: 减少数据传输量
|
|
tags: server, rsc, serialization, props
|
|
---
|
|
|
|
## 最小化 RSC 边界处的序列化
|
|
|
|
React 服务端/客户端边界会将所有对象属性序列化为字符串，并将其嵌入 HTML 响应及后续的 RSC 请求中。这些序列化数据直接影响到页面体积和加载时间，因此 **数据大小至关重要**。只传递客户端实际需要的字段。
|
|
|
|
**错误做法（序列化全部 50 个字段）：**
|
|
|
|
```tsx
|
|
async function Page() {
|
|
const user = await fetchUser() // 50 个字段
|
|
return <Profile user={user} />
|
|
}
|
|
|
|
'use client'
|
|
function Profile({ user }: { user: User }) {
|
|
return <div>{user.name}</div> // 仅使用了 1 个字段
|
|
}
|
|
```
|
|
|
|
**正确做法（仅序列化 1 个字段）：**
|
|
|
|
```tsx
|
|
async function Page() {
|
|
const user = await fetchUser()
|
|
return <Profile name={user.name} />
|
|
}
|
|
|
|
'use client'
|
|
function Profile({ name }: { name: string }) {
|
|
return <div>{name}</div>
|
|
}
|
|
```
|