伺服器組件

React 伺服器組件允許你編寫可以在伺服器上算繪並可選地快取的 UI。在 Next.js 中，算繪工作會進一步按路由區段分割，以啟用串流和部分算繪，並且有三種不同的伺服器算繪策略

• 靜態算繪
• 動態算繪
• 串流

本頁面將介紹伺服器組件的工作原理、何時可以使用它們以及不同的伺服器算繪策略。

伺服器算繪的優點

在伺服器上執行算繪工作有幾個優點，包括

• 資料抓取：伺服器組件允許你將資料抓取移至伺服器，更靠近你的資料來源。這可以透過減少抓取算繪所需資料的時間，以及客戶端需要發出的請求數量來提高效能。
• 安全性：伺服器組件允許你將敏感資料和邏輯保留在伺服器上，例如權杖和 API 金鑰，而不會有將其暴露給客戶端的風險。
• 快取：透過在伺服器上算繪，結果可以被快取並在後續請求和跨使用者之間重複使用。這可以透過減少每個請求上完成的算繪和資料抓取量來提高效能並降低成本。
• 效能：伺服器組件為你提供了額外的工具來從基準線優化效能。例如，如果你從完全由用戶端組件組成的應用程式開始，將 UI 的非互動部分移至伺服器組件可以減少所需的用戶端 JavaScript 數量。這對於網際網路速度較慢或裝置效能較差的使用者有利，因為瀏覽器需要下載、解析和執行的用戶端 JavaScript 較少。
• 初始頁面載入和 首次內容繪製 (FCP)：在伺服器上，我們可以產生 HTML，讓使用者立即檢視頁面，而無需等待客戶端下載、解析和執行算繪頁面所需的 JavaScript。
• 搜尋引擎最佳化和社群網路可分享性：算繪的 HTML 可以被搜尋引擎機器人用於索引你的頁面，以及被社群網路機器人用於產生你的頁面的社群卡片預覽。
• 串流：伺服器組件允許你將算繪工作分成多個區塊，並在它們準備就緒時將它們串流到客戶端。這允許使用者更早看到頁面的部分內容，而無需等待整個頁面在伺服器上算繪完成。

在 Next.js 中使用伺服器組件

預設情況下，Next.js 使用伺服器組件。這允許你自動實作伺服器算繪，而無需額外設定，並且你可以在需要時選擇使用用戶端組件，請參閱用戶端組件。

伺服器組件是如何算繪的？

在伺服器上，Next.js 使用 React 的 API 來協調算繪。算繪工作被分成多個區塊：按個別路由區段和 Suspense Boundaries。

每個區塊都分兩個步驟算繪

1. React 將伺服器組件算繪成一種稱為 React 伺服器組件酬載 (RSC 酬載) 的特殊資料格式。
2. Next.js 使用 RSC 酬載和用戶端組件 JavaScript 指令在伺服器上算繪 HTML。

然後，在客戶端上

1. HTML 用於立即顯示路由的快速非互動式預覽 - 這僅適用於初始頁面載入。
2. React 伺服器組件酬載用於協調用戶端和伺服器組件樹，並更新 DOM。
3. JavaScript 指令用於 hydrate 用戶端組件並使應用程式具有互動性。

什麼是 React 伺服器組件酬載 (RSC)？

RSC 酬載是算繪的 React 伺服器組件樹的精簡二進位表示形式。它由客戶端上的 React 用於更新瀏覽器的 DOM。RSC 酬載包含

• 伺服器組件的算繪結果
• 應該算繪用戶端組件的位置的佔位符，以及對其 JavaScript 檔案的引用
• 從伺服器組件傳遞到用戶端組件的任何 props

伺服器算繪策略

伺服器算繪有三個子集：靜態、動態和串流。

靜態算繪 (預設)

使用靜態算繪，路由在建置時或在 資料重新驗證 後在背景中算繪。結果會被快取，並且可以被推送到 內容傳遞網路 (CDN)。這種最佳化允許你在使用者和伺服器請求之間共享算繪工作的結果。

當路由具有非個人化給使用者且可在建置時知道的資料時，例如靜態部落格文章或產品頁面，靜態算繪非常有用。

動態算繪

使用動態算繪，路由在請求時為每個使用者算繪。

當路由具有個人化給使用者的資料，或具有只能在請求時知道的資訊（例如 cookies 或 URL 的搜尋參數）時，動態算繪非常有用。

具有快取資料的動態路由

在大多數網站中，路由不是完全靜態或完全動態的 - 這是一個頻譜。例如，你可以擁有一個電子商務頁面，該頁面使用以間隔重新驗證的快取產品資料，但也具有未快取的個人化客戶資料。

在 Next.js 中，你可以擁有同時具有快取和未快取資料的動態算繪路由。這是因為 RSC 酬載和資料是分開快取的。這允許你選擇加入動態算繪，而無需擔心在請求時抓取所有資料的效能影響。

瞭解更多關於完整路由快取和資料快取。

切換到動態算繪

在算繪期間，如果發現 動態 API 或 { cache: 'no-store' } 的 fetch 選項，Next.js 將切換為動態算繪整個路由。下表總結了動態 API 和資料快取如何影響路由是靜態算繪還是動態算繪

在上表中，為了使路由完全靜態，所有資料都必須被快取。但是，你可以擁有一個動態算繪的路由，該路由同時使用快取和未快取的資料抓取。

作為開發人員，你無需在靜態和動態算繪之間做出選擇，因為 Next.js 將根據使用的功能和 API 自動為每個路由選擇最佳的算繪策略。相反，你可以選擇何時快取或重新驗證特定資料，並且你可以選擇串流你的 UI 的部分內容。

動態 API

動態 API 依賴只能在請求時知道的資訊（而不是在預先算繪期間提前知道的資訊）。使用任何這些 API 都會發出開發人員的意圖信號，並將整個路由選擇加入到請求時的動態算繪中。這些 API 包括

• cookies
• headers
• connection
• draftMode
• searchParams prop
• unstable_noStore

串流

串流使你能夠從伺服器逐步算繪 UI。工作被分成多個區塊，並在其準備就緒時串流到客戶端。這允許使用者立即看到頁面的部分內容，在整個內容完成算繪之前。

串流預設內建於 Next.js App Router 中。這有助於提高初始頁面載入效能，以及依賴較慢資料抓取的 UI，這些 UI 會阻止算繪整個路由。例如，產品頁面上的評論。

你可以開始使用 loading.js 和具有 React Suspense 的 UI 組件串流路由區段。有關更多資訊，請參閱載入 UI 和串流章節。