第三代 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 優勢
性能優化
- 減輕客戶端負擔：Server Components 的邏輯只在服務器執行，不會打包到瀏覽器里，瀏覽器下載的 JavaScript 更少。
- 減少請求次數：數據直接從服務器獲取，避免前端多次調用 API。
- 流式渲染：服務器可以邊生成邊傳輸，瀏覽器收到部分就能先渲染，首屏加載更快。
- 更輕量的 hydration：只有客戶端組件需要激活事件和狀態，瀏覽器運行開銷更低。
開發體驗
- 數據獲取更直觀：數據邏輯寫在組件里，不用前后端切換思路。
- 職責劃分明確：Server 組件負責靜態內容和數據，Client 組件處理交互和動態行為。
- 保留 React 風格：依然是聲明式和組合式寫法，無需額外學習新語法。
架構簡化
- 減少中間層：Server Components 可以直接訪問數據庫或文件系統。
- 邏輯復用方便：避免重復寫類似 getServerSideProps 的數據獲取邏輯。
- 天然 SEO 友好：生成的內容本身就是可被搜索引擎索引的 HTML。
使用方式與實踐
目前，Next.js App Router 是最成熟的落地方案。
// 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 應用，不再只是一個“前端框架”，而是更自然的 全棧開發模型。
