React 服务器组件（React Server Components）

React 服务器组件（React Server Components，简称 RSC）是 React 团队于 2020 年 12 月公布的一种组件架构，允许一部分组件只在服务器上运行：它们可以直接读取数据库、访问文件系统或调用内部服务，渲染结果以一种特殊的序列化流（常被称为 RSC Payload）发送给浏览器，其自身代码与所依赖的库完全不会打包进客户端 JavaScript。

概述

传统 React 应用中，所有组件代码都要发送到浏览器执行，即便某组件只负责取数和展示；服务端渲染（SSR）虽能输出首屏 HTML，但仍需下载全部组件代码完成水合。RSC 将组件划分为两类：服务器组件默认只在服务端执行，可以是异步函数、直接 await 数据，但不能使用 useState、useEffect 等交互能力；客户端组件以 use client 指令标记，照常打包到浏览器承担交互。两者可在同一棵组件树中嵌套组合，React 在服务端渲染服务器组件后，把结果与客户端组件的占位信息一起流式传输，浏览器只对客户端组件进行水合。配套的服务器函数（Server Actions，经由 use server 指令）进一步允许表单与事件直接调用服务端逻辑。Next.js 13（2022 年）的 App Router 是第一个生产级实现，将 RSC 设为默认组件类型；React 19 正式将相关能力纳入稳定版本。

核心特点

• 零客户端体积：服务器组件及其依赖（如 Markdown 解析器、数据库驱动）不进入浏览器包。
• 贴近数据源：组件内直接读取数据库或后端服务，减少客户端请求瀑布。
• 与 SSR 互补：SSR 解决首屏 HTML，RSC 解决组件代码是否下发，二者常同时使用。
• 可组合：服务器组件与客户端组件按需嵌套，交互边界由 use client 显式声明。
• 流式渲染：配合 Suspense 分块流式输出，数据慢的部分不阻塞整页。

应用场景

RSC 适合数据密集、内容为主的应用：电商商品页、内容平台、仪表盘的展示区域等，可显著减少客户端 JavaScript 并简化取数逻辑。目前主要通过框架使用：Next.js App Router 最为成熟，React Router v7 与 Expo 等也在跟进支持。高度交互的编辑器类应用中客户端组件仍占主体，RSC 收益相对有限。

常见问题

问：服务器组件和服务端渲染（SSR）是一回事吗？答：不是。SSR 把组件渲染成首屏 HTML 但组件代码仍需下发水合；RSC 决定组件代码根本不发送到客户端，两者互补且经常同时启用。

问：什么时候必须用客户端组件？答：需要 useState、useEffect、事件处理、浏览器 API 或使用依赖这些能力的第三方库时，必须以 use client 标记为客户端组件。

问：不用 Next.js 能用 RSC 吗？答：RSC 需要打包器与服务端运行时的深度配合，独立接入门槛高，目前实践上主要依赖 Next.js 等集成框架提供的实现。