React Server Components 入门：心智模型与边界

一句话定义

Server Component 只在服务端执行，其代码 不会 打进客户端 JavaScript bundle；渲染结果以序列化格式（RSC Payload）发给客户端，与 Client Component 树拼接。

与 SSR 的区别

SSR 解决「首屏 HTML」；RSC 解决 「哪些逻辑根本不该下载到浏览器」。

默认规则（Next.js App Router）

• app/ 下组件默认 Server
• 文件顶行 "use client" → Client，其子树默认 Client（除非再拆 Server 子组件，需通过 children 组合）

// ServerComponent.tsx — 无 "use client"
import { ClientButton } from "./ClientButton";

export async function ServerCard() {
  const data = await loadFromDisk();
  return (
    <article>
      <h2>{data.title}</h2>
      <ClientButton />  {/* 交互在客户端 */}
    </article>
  );
}

不能把 Server Component import 进 Client

错误：

"use client";
import { ServerOnly } from "./server"; // 不行

正确模式：Client 包 Server 的 children

// layout.tsx (Server)
<ClientShell>
  <ServerList />  {/* 作为 children 传入 */}
</ClientShell>

适合放在 Server 的逻辑

• 读数据库、文件、内部 API
• 使用密钥、process.env 服务端变量
• 大依赖（markdown 解析、语法高亮库）——若无需在浏览器交互

必须在 Client 的逻辑

• onClick、onChange
• useState、useReducer、useEffect
• 浏览器 API、window、document

性能提示

1. 尽量缩小 "use client" 叶子范围
2. 列表项若纯展示，保持 Server；仅「点赞按钮」Client
3. 配合 next/dynamic 懒加载重型 Client 组件

小结

RSC 的核心是 运行时边界，不是语法糖。Next.js 16 的 App Router 已把这条边界变成默认——理解它，才能同时做好 SEO、首屏与 bundle 体积。