第三代 React，怎么玩？

自 React 诞生以来，它一直坚持一个核心理念：UI = f(state)。这个公式简单直接，却彻底改变了前端开发的方式，也带动了整个生态的成长。回头看 React 的发展，大致可以分成两个阶段：

Class 组件：偏向面向对象，生命周期方法多，写起来比较笨重。
Hooks：带来了函数式思维，把状态和副作用处理变得轻量很多。

而如今，React 正迎来可能是 第三代形态 ------ React Server Components（RSC）。

这次不只是语法糖或 API 的改进，而是一次架构层面的升级。

RSC 从哪来？

它的雏形最早可以追溯到 2020 年，Meta 团队提出了一个设想：

把组件模型扩展到网络边界，让服务器和客户端的职责划分更自然。

不过，Meta 本身并没有动力独立推进这样庞大的工程。自 2021 年起，Vercel 承担起了主要的推动角色：

在 Next.js App Router 中率先实践 RSC。
推动与 Actions、Transitions 等新特性逐步稳定。
将成果扩散到更广泛的 React 生态。

到了 2025 年，除了 Next.js，Parcel、Vite 插件、React Router 等也陆续加入支持，RSC 生态正在发芽。

什么是 RSC？

RSC 的核心理念，是把组件划分为两类：

Server Components（服务端组件）
Client Components（客户端组件）

通过分层执行，实现高效渲染和职责清晰的分工。

服务端组件

运行环境：只在服务器端执行。
职责：
- 直接访问数据库、文件系统或 API。
- 渲染结果以序列化形式（通常是 JSON）传输到客户端。
- 不包含交互逻辑（例如 onClick）。
特点：
- 零客户端 JavaScript 开销，不会被打包进浏览器。
- 天然支持异步数据获取。
- 一般命名为 .server.js 或 .server.tsx。

客户端组件

运行环境：在浏览器端执行。
职责：处理用户交互、管理状态（如 useState、useEffect）、实现动画等动态逻辑。
特点：
- 需要在文件顶部加上 'use client' 指令。
- 可以被服务端组件（Server Components）引用，但反过来不行。
- 通常会以 .client.js 或 .client.tsx 作为文件后缀。

边界规则

数据流向：数据始终是自上而下传递的。服务端组件可以渲染客户端组件，并将数据通过 props 传入，但客户端组件不能直接渲染服务端组件。
职责划分：服务端组件负责静态内容和数据获取；客户端组件负责交互和动态行为。两者之间通过 props 建立联系。

RSC 工作原理

React Server Components 带来了一种全新的渲染思路，它不是简单的服务端渲染（SSR），也不是传统的客户端渲染，而是把两者融合在了一起。

首先，组件在服务器上运行 。Server Components 可以直接在服务端执行数据请求，比如读取数据库或文件系统。React 会把组件树"压缩"成一种叫 Flight 协议 的特殊 JSON 描述，再把它传递给客户端。

接下来是 流式传输 。服务器生成数据的同时就能一点点发送过来，浏览器收到一部分就能先渲染一部分。如果某些组件还没准备好，React 可以配合 Suspense 展示友好的占位界面，让页面不会"卡死"。

到了客户端，React 会把收到的 Flight 数据和本地的 Client Components 拼接在一起。Server Components 负责生成最终的 UI 结构，而 Client Components 则负责事件绑定、状态管理等交互逻辑，这个过程叫做 客户端协调。

这种模式的一个最大好处就是 数据获取变得极其简单。因为 Server Components 直接运行在服务端，它们可以直接调用数据库，不再需要额外的 API 层或复杂的数据请求逻辑。

RSC vs SSR：

SSR：输出完整 HTML → 客户端 hydration。
RSC：输出组件树描述（JSON） → 客户端拼装 UI，JS 传输量更小。

RSC 优势

性能优化

减轻客户端负担：Server Components 的逻辑只在服务器执行，不会打包到浏览器里，浏览器下载的 JavaScript 更少。
减少请求次数：数据直接从服务器获取，避免前端多次调用 API。
流式渲染：服务器可以边生成边传输，浏览器收到部分就能先渲染，首屏加载更快。
更轻量的 hydration：只有客户端组件需要激活事件和状态，浏览器运行开销更低。

开发体验

数据获取更直观：数据逻辑写在组件里，不用前后端切换思路。
职责划分明确：Server 组件负责静态内容和数据，Client 组件处理交互和动态行为。
保留 React 风格：依然是声明式和组合式写法，无需额外学习新语法。

架构简化

减少中间层：Server Components 可以直接访问数据库或文件系统。
逻辑复用方便 ：避免重复写类似 getServerSideProps 的数据获取逻辑。
天然 SEO 友好：生成的内容本身就是可被搜索引擎索引的 HTML。

使用方式与实践

目前，Next.js App Router 是最成熟的落地方案。

javascript 复制代码

// app/page.js ------ Server Component
import db from '@/lib/db';
import ClientCounter from './ClientCounter';

export default async function Page() {
  const posts = await db.getPosts();

  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map(p => <li key={p.id}>{p.title}</li>)}
      </ul>
      <ClientCounter />
    </div>
  );
}

// app/ClientCounter.js ------ Client Component
'use client';
import { useState } from 'react';

export default function ClientCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

特点：

Page 是 Server Component，直接读数据库。
ClientCounter 是 Client Component，负责交互。
React 自动完成两者的边界协调。

生态进展

框架：Next.js 已全面支持；Remix、React Router 正在跟进；Astro、Redwood 也在探索。
打包工具：Webpack 先行，Parcel 稳定，Vite 插件在 2025 年正式推出。
React 团队 ：持续完善 Suspense、use hook、Server Actions 等配套能力。

写在最后

如果说 Class 组件 开启了 React 的第一代，Hooks 定义了第二代，那么 React Server Components 很可能就是 第三代 React。

它不仅提升了性能和开发体验，更在潜移默化中，重塑了前后端的分工方式。

虽然目前生态还在早期，但随着 Next.js、Vite、React Router 等的跟进，RSC 正在成为 React 的新常态。

未来的 React 应用，不再只是一个"前端框架"，而是更自然的 全栈开发模型。