深入理解 React Server Components
4 分鐘
1. React Server Components（RSC）是什麼？
React Server Components（RSC）是一種新的 React 元件類型，它在建置時或在伺服器上被渲染。與傳統的、在客戶端瀏覽器中渲染的元件（現在稱為「Client Components」）不同，RSC 的程式碼永遠不會被傳送到客戶端。瀏覽器接收到的僅僅是渲染好的 HTML 或一種特殊的串流格式。
這標誌著 React 從一個純粹的客戶端函式庫，演變為一個可以在伺服器和客戶端之間無縫運作的全端框架。
2. RSC 解決了哪些問題？
RSC 的出現主要是為了解決以下幾個核心痛點：
- 巨大的 JavaScript 套件體積: 傳統 React 應用程式會將所有元件的 JS 程式碼（包括那些不直接互動的）打包傳送到客戶端，導致初始載入緩慢。RSC 允許我們將大量元件（如文字、版面配置、資料展示）保留在伺服器端，從而實現零 JS 體積。
- 請求瀑布（Request Waterfalls）: 在客戶端取得資料的典型模式是：渲染元件 ->
useEffect-> 發起請求 -> 等待資料 -> 再次渲染。如果元件巢狀層級很深，就會形成請求瀑布，拖慢頁面呈現速度。RSC 可以在伺服器端直接以async/await取得資料，將資料和元件一起串流傳輸到客戶端，從根本上解決這個問題。 - 直接存取後端資源: RSC 執行在伺服器端環境中（如 Node.js），這意味著它們可以直接、安全地存取資料庫、檔案系統或內部 API，無需再向客戶端暴露額外的 API 端點。
3. Server Components vs. Client Components
理解兩者的區別是掌握 RSC 的關鍵。
| 特性 | Server Components（伺服器端元件） | Client Components（客戶端元件） |
|---|---|---|
| 執行環境 | 伺服器（Node.js 等） | 客戶端（瀏覽器） |
| JS 傳送到客戶端 | 否 | 是 |
| 狀態（State） | 不支援（例如 useState） | 支援 |
| 生命週期/Hooks | 不支援（例如 useEffect） | 支援 |
| 互動（Events） | 不支援（例如 onClick） | 支援 |
| 資料取得 | 支援 async/await | 透過 useEffect 或資料取得函式庫 |
| 匯入規則 | 不能匯入客戶端元件 | 可以匯入伺服器端元件（作為 children 或 prop） |
經驗法則: 預設將所有元件視為 Server Components。只有當你的元件需要使用 useState、useEffect 或處理使用者事件（onClick 等）時，才在檔案頂部加入 "use client"; 指令，將其標記為 Client Component。
4. 它們如何協同運作？
一個現代 React 應用程式會是兩者的混合體。例如，一個部落格文章頁面：
PageLayout（Server Component）: 負責整體版面配置。ArticleContent（Server Component）: 從資料庫或 Markdown 檔案中取得文章資料並渲染。LikeButton（Client Component）: 包含useState和onClick事件來處理按讚互動。Comments（Client Component）: 取得並顯示留言，包含表單送出等互動。
伺服器端元件可以在伺服器端「持有」客戶端元件的「位置」，最終在瀏覽器中將兩者無縫地拼接在一起。
結論
React Server Components 是一次深刻的範式轉變，它將 React 的能力從瀏覽器擴充套件到了伺服器，帶來了顯著的效能優勢和更優的開發體驗。雖然它引入了新的心智模型，但透過 Next.js App Router 等框架的實踐，RSC 正在快速成為建構高效能、可擴充 Web 應用程式的新標準。