skillhub-088-vercel-react-best-practices/rules/server-serialization.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Minimize Serialization at RSC Boundaries	HIGH	减少数据传输量	server, rsc, serialization, props

最小化 RSC 边界处的序列化

React 服务端/客户端边界会将所有对象属性序列化为字符串，并将其嵌入 HTML 响应及后续的 RSC 请求中。这些序列化数据直接影响到页面体积和加载时间，因此 数据大小至关重要。只传递客户端实际需要的字段。

错误做法（序列化全部 50 个字段）：

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 个字段）：

async function Page() {
  const user = await fetchUser()
  return <Profile name={user.name} />
}

'use client'
function Profile({ name }: { name: string }) {
  return <div>{name}</div>
}