深入理解 React Server Components
React Server Components (RSC) 是 React 生态系统中的一项重大革新。React 19 于 2024 年 12 月 5 日正式发布，Server Components 已成为 App Router 的默认渲染模式。
什么是 Server Components？
Server Components 是在服务器端运行的 React 组件，它们：
- 不会增加客户端 JavaScript 包的大小
- 可以直接访问后端资源（数据库、文件系统等）
- 支持流式传输
实测性能数据
根据多个团队的迁移报告，采用 Server Components 后：
| 指标 | 迁移前 | 迁移后 | 改善 |
|---|---|---|---|
| 客户端 JS 体积 | 1.4MB | 0.3MB | -78% |
| 可交互时间 (TTI) | 3.1s | 1.1s | -64% |
| 数据请求数 | 12 | 4 | -67% |
内容密集型页面的客户端 JS 体积通常减少 20-40%，在数据展示为主的页面上效果更为显著。
工作原理
Server Components (默认) --> Client Components ('use client')
文件级指令控制组件运行位置：
- 无指令: 默认为 Server Component，可 async、可直接访问数据库
- 'use client': 标记为 Client Component，可使用 hooks 和事件处理
核心优势
- 零 bundle size: Server Component 中导入的依赖（如 markdown 渲染器、语法高亮库、日期处理库）不会发送到客户端
- 直接后端访问: 组件内可直接
await db.posts.findMany()，无需 API 层 - 自动代码分割: 客户端组件按需加载
- 安全性提升: 环境变量、API 密钥等敏感信息保留在服务端
与 SSR 的区别
| SSR | RSC | |
|---|---|---|
| 服务端运行范围 | 整棵树，每次请求 | 仅标记为服务端的组件 |
| 客户端 JS | 整棵树的 JS | 仅 Client Components 的 JS |
| Hydration 成本 | 整棵树 | 仅 Client Components |
最佳实践
- 默认使用 Server Components
- 仅在需要交互（hooks、事件处理、浏览器 API）时使用 Client Components
- 合理划分组件边界，将数据获取逻辑放在 Server Component 中