---
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>
}
```