React Server Components 深入解析：心智模型与实践

React Server Components（RSC）是 React 近十年最深刻的一次范式转变。很多开发者被它的 API 表象迷惑，忽略了背后真正重要的心智模型。

核心问题：组件在哪运行

传统 React 只有一个答案：组件都在客户端运行。RSC 打破了这一点，引入了一个新维度——组件可以运行在服务端。

于是组件被分成两类：

• 服务端组件（Server Components）：默认类型，在服务端运行，可访问数据库、文件系统，产物不包含在 JS bundle 中；
• 客户端组件（Client Components）：用 'use client' 声明，在浏览器运行，可处理交互与状态。

为什么这很重要

服务端组件带来的收益是结构性的：

1. 零体积：服务端组件的代码不进 bundle，能显著压缩首屏 JS；
2. 直接访问后端：省去一层 API 请求，减少瀑布；
3. 更安全：敏感逻辑留在服务端。

代价则是：服务端组件不能使用 hooks、不能绑定事件、不能持有客户端状态。

边界与数据流

RSC 的精髓在于把组件树切分：服务端组件负责取数与渲染骨架，客户端组件负责交互。服务端组件可以把数据作为 props 传给客户端组件，但数据必须是可序列化的。

// 服务端组件：直接读数据
async function Post({ id }) {
  const post = await db.post.find(id);
  return <PostClient title={post.title} />;
}

实践建议

• 默认把组件写成服务端组件，只在需要交互时才加 'use client'；
• 把「数据获取」尽量上移到服务端组件，减少客户端瀑布；
• 注意可序列化约束，不要在服务端到客户端的 props 里传函数。

结语

RSC 不是又一个语法糖，而是对「渲染发生在哪里」的重新思考。掌握它的心智模型，你就掌握了未来几年 React 应用架构的主线。