小編精選 - 技術文章翻譯 · 09月12日

第三代 React，怎麼玩？

第三代 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' 指令。
- 可以被伺服器組件引用，但反過來不行。
- 通常會以 .client.js 或 .client.tsx 作為檔案後綴。

邊界規則

資料流向：資料始終是自上而下傳遞的。伺服器組件可以渲染客戶端組件，並將資料通過 props 傳入，但客戶端組件不能直接渲染伺服器組件。
職責劃分：伺服器組件負責靜態內容和資料擷取；客戶端組件負責互動和動態行為。兩者之間通過 props 建立聯繫。

RSC 工作原理

React Server Components 帶來了一種全新的渲染思路，它不是簡單的伺服器端渲染（SSR），也不是傳統的客戶端渲染，而是把兩者融合在了一起。

首先，組件在伺服器上運行。伺服器組件可以直接在伺服器執行資料請求，比如讀取資料庫或檔案系統。React 會把組件樹“壓縮”成一種叫 Flight 協議 的特殊 JSON 描述，再把它傳遞給客戶端。

接下來是 流式傳輸。伺服器生成資料的同時就能一點點發送過來，瀏覽器收到一部分就能先渲染一部分。如果某些組件還沒準備好，React 可以配合 Suspense 展示友好的佔位界面，讓頁面不會“卡死”。

到了客戶端，React 會把收到的 Flight 資料和本地的 客戶端組件 拼接在一起。伺服器組件負責生成最終的 UI 結構，而客戶端組件則負責事件綁定、狀態管理等互動邏輯，這個過程叫做 客戶端協調。

這種模式的一個最大好處就是 資料擷取變得極其簡單。因為伺服器組件直接運行在伺服器，它們可以直接調用資料庫，不再需要額外的 API 層或複雜的資料請求邏輯。

RSC vs SSR：

SSR：輸出完整 HTML → 客戶端 hydration。
RSC：輸出組件樹描述（JSON） → 客戶端拼裝 UI，JS 傳輸量更小。

RSC 優勢

性能優化

減輕客戶端負擔：伺服器組件的邏輯只在伺服器執行，不會打包到瀏覽器裡，瀏覽器下載的 JavaScript 更少。
減少請求次數：資料直接從伺服器獲取，避免前端多次調用 API。
流式渲染：伺服器可以邊生成邊傳輸，瀏覽器收到部分就能先渲染，首屏加載更快。
更輕量的 hydration：只有客戶端組件需要啟動事件和狀態，瀏覽器運行開銷更低。

開發體驗

資料獲取更直觀：資料邏輯寫在組件裡，不用前後端切換思路。
職責劃分明確：伺服器組件負責靜態內容和資料，客戶端組件處理互動和動態行為。
保留 React 風格：依然是聲明式和組合式寫法，無需額外學習新語法。

架構簡化

減少中間層：伺服器組件可以直接訪問資料庫或檔案系統。
邏輯重用方便：避免重複寫類似 getServerSideProps 的資料獲取邏輯。
天然 SEO 友好：生成的內容本身就是可被搜尋引擎索引的 HTML。

使用方式與實踐

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

// app/page.js —— 伺服器組件
import db from '@/lib/db';
import ClientCounter from './ClientCounter';

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

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

// app/ClientCounter.js —— 客戶端組件
'use client';
import { useState } from 'react';

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

特點：