React Server Components（RSC） 重新定义了组件渲染的边界。传统的 React 组件（客户端组件）在浏览器中运行并生成 HTML，而 Server Components 在服务端执行，只将序列化后的结果发送到客户端。这种架构带来了两个革命性优势：零客户端体积和天然的服务端能力。
零客户端体积：不发代码，只发结果
一个 React 组件通常包含大量的 JavaScript 代码——逻辑、依赖库、工具函数等。在传统 SPA 架构下，所有这些代码都会被打包并下发到浏览器，即使用户只需要最终的渲染结果。RSC 从根本上改变了这一点：
- 组件代码留在服务端：Server Component 的源码及依赖库永远不会被打包到客户端 bundle 中。
- 只发送渲染产出：服务端执行组件，生成一个特殊的 RSC Payload（序列化后的 React 元素树），客户端直接使用这个输出，不需要下载该组件对应的 JavaScript。
实际效果：
假设你有一个 Markdown 渲染组件，它依赖体积较大的语法解析库（如 markdown-it，约 40KB gziped）：
// ❌ 传统客户端组件：整个 markdown-it 库都会被打包到浏览器
'use client';
import MarkdownIt from 'markdown-it';
function MarkdownRenderer({ content }) {
const md = new MarkdownIt();
const html = md.render(content);
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}改为 Server Component 后：
// ✅ Server Component：markdown-it 库留在服务端，客户端零额外体积
import MarkdownIt from 'markdown-it';
function MarkdownRenderer({ content }) {
const md = new MarkdownIt();
const html = md.render(content);
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}浏览器收到的只是渲染后的 HTML 片段，根本不知道 markdown-it 的存在。这对于需要依赖大型、纯计算、与 UI 无关的第三方库的场景（如日期格式化、语法高亮、代码编译等），性能提升极为显著。最终客户端 JavaScript bundle 体积大幅缩减，首屏加载速度更快。
天然服务端能力：直接访问后端资源
Server Component 在服务端执行，天然拥有 Node.js 环境的全部能力。这意味着它可以直接访问数据库、文件系统、内部微服务等后端资源，而不需要像纯 SPA 那样，额外编写并暴露 API 端点。
直接访问数据库：
// 直接在组件中查询数据库，无需 API 中间层
async function ProductList({ category }) {
const db = await connectToDatabase();
const products = await db.collection('products')
.find({ category })
.sort({ createdAt: -1 })
.limit(20)
.toArray();
return (
<div>
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}在传统的客户端渲染方案中，你需要：
- 写一个 API 路由（例如
/api/products?category=xxx）。 - 在 API 层实现查询逻辑，处理认证、参数校验。
- 客户端通过
fetch请求该 API，处理 loading 和 error 状态。 - 将数据传给组件，渲染界面。
而 RSC 将第 1-2 步直接融合进组件本身，开发体验大幅简化。你不再需要在“前端工程师”和“后端工程师”之间反复定义 API 契约，组件直接是数据的“天然消费者”。
直接操作文件系统：
import fs from 'fs/promises';
import path from 'path';
async function ReleaseNotes() {
const filePath = path.join(process.cwd(), 'CHANGELOG.md');
const content = await fs.readFile(filePath, 'utf-8');
return (
<article>
<MarkdownRenderer content={content} />
</article>
);
}这种能力对于内容型网站、文档站、博客等场景极为方便。你无需再单独写 API 来读取文件，组件自身就能完成这项工作。
自动代码分割与按需加载
Server Component 还有一个附带优势：它天然实现了基于路由或组件边界的自动代码分割。因为 Server Component 的代码始终在服务端执行，客户端只有需要时才请求对应的 RSC Payload，而不像传统 SPA 中需要开发者手动用 React.lazy 分割代码。这使得大型应用的初始 bundle 已经非常精简，其余部分按需从服务端流式加载。
局限与权衡
RSC 的这些优势也伴随着约束：
- Server Component 不能使用 Hooks（如 useState、useEffect、useRef），也不能包含交互行为（事件监听、浏览器 API）。
- 它们必须与客户端组件配合使用，构成“服务端组件为骨架，客户端组件为交互岛屿”的混合架构。
- 需要运行在支持 RSC 的环境中（如 Next.js App Router）才能发挥全部能力。
理解这些核心优势后，你会意识到 RSC 并不是要替代客户端组件，而是提供了一种新的组件分层思想：将数据获取和计算密集的部分放在服务端，保持客户端的轻量和交互性。这种分离是 React 走向全栈化的关键一步。