RSC

RSC（React Server Components）在 React 18 引入、React 19 成为正式能力。Next App Router 默认组件就是服务端组件。它不是「再做一次 SSR」，而是允许一棵树里有的节点只在服务器跑，有的节点交给浏览器。

和 SSR、CSR 怎么并列

• CSR：浏览器包办渲染和数据。
• SSR：服务器先出整页 HTML，客户端再整页水合。
• RSC：服务器组件在服务器执行，它们的代码和依赖不用进浏览器 bundle；需要交互的叶子标成客户端组件，只对那些叶子水合。

官网这种页很典型：上面长文、图片是静态的，下面留言框要输入。正文用服务端组件，表单单独 'use client'。

// 默认：服务端组件
export default function Article() {
  return <article>……</article>;
}
tsx

"use client";

export default function CommentBox() {
  return <form>……</form>;
}
tsx

RSC Payload

SSR 直接吐 HTML。RSC 还会传一种更紧凑的树描述（常叫 RSC Payload）：哪些是服务端节点、哪些位置留给客户端组件。客户端按这份描述把交互组件嵌进去。

客户端组件也会在服务器预渲染一版无交互的 HTML，所以用户先看到按钮和文字，等 JS 到了再绑事件。看起来像 SSR，但水合范围小得多。

实际收益

1. 包更小
   服务端组件用的 fs、ORM、markdown 解析器不会打进浏览器。

2. 局部水合
   只有客户端子树要 hydrate，静态大段跳过。

3. 流式
   HTML 和 Payload 可以边算边推。慢的那块用 Suspense 占位，先出的壳立刻显示，FCP 更好。

嵌套规则（先记结论）

• 服务端组件可以渲染客户端组件
• 客户端组件不能直接 import 服务端组件
• 要把服务端组件塞进客户端壳，用 children 传进去（服务器先渲染好再当 slot）

下一篇单独把 Server Components 的能做 / 不能做写清楚。

参考文档

• Server and Client Components
• React Server Components
• Streaming