Meta Description： React Server Components（RSC）是 React 近年来最重要的特性之一。本文从设计背景、工作原理、适用场景和开发实践等角度，深入解析它真正解决的问题。

Slug： react-server-components-explained

前言

React Server Components（简称 RSC）是 React 生态近几年讨论最多的话题之一。

很多开发者第一次接触它时都会疑惑：

它和 SSR 有什么区别？

为什么 Next.js 一直在推广它？

是不是以后所有组件都应该写成 Server Component？

事实上，RSC 并不是 SSR 的升级版，而是 React 对前后端边界的一次重新定义。

SSR 并不能解决所有问题

传统 SSR 的优势主要有两个：

• 更快的首屏渲染
• 更好的 SEO

但 SSR 仍然需要把大量 JavaScript 发送到浏览器进行 Hydration。

也就是说：

HTML 虽然已经渲染出来。

但浏览器仍然需要下载完整组件代码。

这导致：

页面虽然看见了。

但真正可交互还需要等待。

Server Components 的思路

Server Component 最大特点是：

组件只运行在服务器。

浏览器收到的是：

组件结果。

而不是组件源码。

例如：

一个商品详情组件。

需要：

数据库查询。

权限判断。

价格计算。

这些完全可以在服务器完成。

浏览器最终只接收渲染结果。

这样可以减少客户端 JavaScript。

哪些组件适合放服务器？

通常包括：

• 商品详情
• 用户信息
• 博客文章
• 评论列表
• 权限菜单
• 配置中心

这些数据本来就来自服务器。

没有必要再把获取逻辑发送到浏览器。

Client Component 负责什么？

真正需要交互的部分。

例如：

• Button
• Input
• Modal
• Dropdown
• Carousel

这些组件依赖：

事件。

状态。

浏览器 API。

因此仍然需要 Client Component。

Server Component 最大价值

很多人认为它最大的价值是 SEO。

其实不是。

真正价值在于：

减少客户端 JavaScript。

现代网站越来越大。

真正影响性能的不是 HTML。

而是：

几十 MB JavaScript。

Server Component 可以把很多逻辑留在服务器。

浏览器只负责交互。

整体体验明显提升。

是否所有项目都适合？

不是。

后台管理系统：

意义不大。

因为大量操作依赖客户端交互。

内容站：

非常适合。

例如：

博客。

新闻。

文档。

商品详情。

营销官网。

因此目前最大的受益者其实是：

Next.js。

而不是普通 React SPA。

总结

React Server Components 并不是为了替代 Client Component。

而是为了重新划分：

哪些代码应该运行在服务器。

哪些代码应该运行在浏览器。

未来 React 项目将越来越倾向：

服务器负责数据。

客户端负责交互。

这是现代 Web 应用的重要发展方向。