React Server Components 使用笔记

心智模型

RSC 最容易搞混的一点："use client" 不是"这个组件在客户端渲染"，而是"从这里开始进入客户端 bundle"。

服务端组件可以把客户端组件当作插槽来用：

// 服务端组件
<ClientTabs>
  <ServerHeavyContent />   {/* 这段仍然在服务端渲染 */}
</ClientTabs>

children 作为 props 传进去时，内容早已在服务端渲染成 RSC payload，不会被拉进客户端。

几条经验

1. 数据往下沉。别在页面顶层一次性查完再层层传，直接在需要的组件里查，配合 React cache 去重。
2. use client 往叶子推。一个按钮需要 onClick，就只把按钮标成客户端组件。
3. 注意序列化边界。传给客户端组件的 props 必须能序列化，Date 可以，Prisma 的 Decimal 不行，函数也不行。

一个坑

searchParams 和 params 在新版本里是 Promise，要 await：

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page } = await searchParams;
}

忘了 await 的话，类型不会报错但值永远是 undefined —— 因为 Promise 对象本身没有 page 属性。