用戶端組件

用戶端組件讓您編寫互動式 UI，該 UI 會在伺服器上預先算繪，並可使用用戶端 JavaScript 在瀏覽器中執行。

此頁面將說明用戶端組件的運作方式、其算繪方式，以及您可能使用它們的時機。

用戶端算繪的優點

在用戶端執行算繪工作有幾個優點，包括

互動性：用戶端組件可以使用狀態、效果和事件監聽器，這表示它們可以為使用者提供即時回饋並更新 UI。
瀏覽器 API：用戶端組件可以存取瀏覽器 API，例如地理位置或 localStorage。

在 Next.js 中使用用戶端組件

若要使用用戶端組件，您可以將 React "use client" 指令新增至檔案頂端，imports 上方。

"use client" 用於宣告伺服器與用戶端組件模組之間的邊界。這表示在檔案中定義 "use client" 後，匯入其中的所有其他模組 (包括子組件) 都會被視為用戶端捆綁的一部分。

app/counter.tsx

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

下圖顯示，若未定義 "use client" 指令，則在巢狀組件 (toggle.js) 中使用 onClick 和 useState 將導致錯誤。這是因為根據預設，App Router 中的所有組件都是伺服器組件，這些 API 在伺服器組件中不可用。藉由在 toggle.js 中定義 "use client" 指令，您可以告知 React 進入用戶端邊界，其中這些 API 可用。

Use Client Directive and Network Boundary

定義多個 use client 進入點:

您可以在 React 組件樹狀結構中定義多個 "use client" 進入點。這可讓您將應用程式分割成多個用戶端捆綁。

但是，"use client" 不需要定義在每個需要在用戶端上算繪的組件中。一旦您定義了邊界，所有子組件和匯入其中的模組都會被視為用戶端捆綁的一部分。

用戶端組件是如何算繪的？

在 Next.js 中，用戶端組件的算繪方式會因請求是完整頁面載入 (首次造訪您的應用程式，或由瀏覽器重新整理觸發的頁面重新載入) 或後續導航的一部分而有所不同。

完整頁面載入

為了最佳化初始頁面載入，Next.js 將使用 React 的 API 在伺服器上為用戶端和伺服器組件算繪靜態 HTML 預覽。這表示當使用者首次造訪您的應用程式時，他們將立即看到頁面內容，而無需等待用戶端下載、剖析和執行用戶端組件 JavaScript 捆綁。

在伺服器上

React 將伺服器組件算繪成一種稱為React 伺服器組件酬載 (RSC 酬載) 的特殊資料格式，其中包含對用戶端組件的參考。
Next.js 使用 RSC 酬載和用戶端組件 JavaScript 指令，在伺服器上算繪路由的 HTML。

然後，在用戶端上

HTML 用於立即顯示路由的快速非互動式初始預覽。
React 伺服器組件酬載用於協調用戶端和伺服器組件樹狀結構，並更新 DOM。
JavaScript 指令用於水合用戶端組件，並使其 UI 具有互動性。

什麼是水合？

水合是將事件監聽器附加到 DOM 的過程，以使靜態 HTML 具有互動性。在幕後，水合是使用 hydrateRoot React API 完成的。

後續導航

在後續導航中，用戶端組件完全在用戶端上算繪，而無需伺服器算繪的 HTML。

這表示用戶端組件 JavaScript 捆綁已下載並剖析。一旦捆綁就緒，React 將使用 RSC 酬載來協調用戶端和伺服器組件樹狀結構，並更新 DOM。

回到伺服器環境

有時，在您宣告 "use client" 邊界後，您可能會想要回到伺服器環境。例如，您可能想要縮減用戶端捆綁大小、在伺服器上擷取資料，或使用僅在伺服器上可用的 API。

即使程式碼在理論上是巢狀於用戶端組件內，您也可以藉由交錯用戶端和伺服器組件以及伺服器動作，將程式碼保留在伺服器上。如需更多資訊，請參閱組合模式頁面。