深入理解 React Server Components
4 min
1. React Server Components (RSC) 是什么？
React Server Components (RSC) 是一种新的 React 组件类型，它在 构建时或在服务器上 被渲染。与传统的在客户端浏览器中渲染的组件（现在称为 “Client Components”）不同，RSC 的代码永远不会被发送到客户端。浏览器接收到的仅仅是渲染好的 HTML 或一种特殊的流式格式。
这标志着 React 从一个纯粹的客户端库，演变为一个可以在服务器和客户端之间无缝工作的全栈框架。
2. RSC 解决了哪些问题？
RSC 的出现主要为了解决以下几个核心痛点：
- 巨大的 JavaScript 包体积: 传统 React 应用会将所有组件的 JS 代码（包括那些不直接交互的）打包发送到客户端，导致初始加载缓慢。RSC 允许我们将大量组件（如文本、布局、数据展示）保留在服务端，从而实现 零 JS 体积。
- 请求瀑布 (Request Waterfalls): 在客户端获取数据的典型模式是：渲染组件 ->
useEffect-> 发起请求 -> 等待数据 -> 再次渲染。如果组件嵌套层级很深，就会形成请求瀑布，拖慢页面呈现速度。RSC 可以在服务端直接async/await数据获取，将数据和组件一起流式传输到客户端，从根本上解决了这个问题。 - 直接访问后端资源: RSC 运行在服务端环境中（如 Node.js），这意味着它们可以直接、安全地访问数据库、文件系统或内部 API，无需再暴露额外的 API 端点给客户端。
3. Server Components vs. Client Components
理解两者的区别是掌握 RSC 的关键。
| 特性 | Server Components (服务端组件) | Client Components (客户端组件) |
|---|---|---|
| 运行环境 | 服务器 (Node.js 等) | 客户端 (浏览器) |
| JS 发送到客户端 | 否 | 是 |
| 状态 (State) | 不支持 (e.g., useState) | 支持 |
| 生命周期/Hooks | 不支持 (e.g., useEffect) | 支持 |
| 交互 (Events) | 不支持 (e.g., onClick) | 支持 |
| 数据获取 | 支持 async/await | 通过 useEffect 或数据获取库 |
| 导入规则 | 不能导入客户端组件 | 可以导入服务端组件 (作为 children 或 prop) |
经验法则: 默认将所有组件视为 Server Components。只有当你的组件需要使用 useState, useEffect 或处理用户事件 (onClick 等) 时，才在文件顶部添加 "use client"; 指令，将其标记为 Client Component。
4. 它们如何协同工作？
一个现代 React 应用会是两者的混合体。例如，一个博客文章页面：
PageLayout(服务端组件): 负责整体布局。ArticleContent(服务端组件): 从数据库或 Markdown 文件中获取文章数据并渲染。LikeButton(客户端组件): 包含useState和onClick事件来处理点赞交互。Comments(客户端组件): 获取并显示评论，包含表单提交等交互。
服务端组件可以在服务端“持有”客户端组件的“坑位”，最终在浏览器中将两者无缝地拼接在一起。
结论
React Server Components 是一次深刻的范式转变，它将 React 的能力从浏览器扩展到了服务器，带来了显著的性能优势和更优的开发体验。虽然它引入了新的心智模型，但通过 Next.js App Router 等框架的实践，RSC 正在快速成为构建高性能、可扩展 Web 应用的新标准。