客戶端組件

用戶端元件允許您編寫可在伺服器上預渲染的互動式 UI，並可使用用戶端 JavaScript 在瀏覽器中運行。

本頁將說明用戶端元件的工作原理、渲染方式以及您可能使用它們的時機。

用戶端渲染的優點

在用戶端進行渲染工作有幾個優點，包括：

互動性：用戶端元件可以使用狀態、效果和事件監聽器，這意味著它們可以向用戶提供即時反饋並更新 UI。
瀏覽器 API：用戶端元件可以存取瀏覽器 API，例如地理位置或本地儲存空間。

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

要使用用戶端元件，您可以在檔案頂部、導入語句上方添加 React "use client" 指令。

"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 將導致錯誤。這是因為，根據預設，應用程式路由器中的所有元件都是伺服器元件，而這些 API 在伺服器元件中不可用。透過在 toggle.js 中定義 "use client" 指令，您可以告知 React 進入可以使用這些 API 的用戶端邊界。

Use Client Directive and Network Boundary

定義多個 use client 進入點:

您可以在 React 元件樹中定義多個「use client」進入點。這允許您將應用程式拆分為多個用戶端套件。

不過，並不需要在每個需要在客戶端渲染的組件中都定義 "use client"。一旦定義了邊界，所有子組件和導入其中的模組都會被視為客戶端 bundles 的一部分。

客戶端組件是如何渲染的？

在 Next.js 中，客戶端組件的渲染方式取決於請求是完整頁面載入（初次訪問您的應用程式或瀏覽器重新整理觸發的頁面重新載入）還是後續導航。

完整頁面載入

為了最佳化初始頁面載入速度，Next.js 會使用 React 的 API 在伺服器端為客戶端和伺服器端組件渲染靜態 HTML 預覽。這意味著，當使用者第一次訪問您的應用程式時，他們會立即看到頁面的內容，而無需等待客戶端下載、解析和執行客戶端組件 JavaScript bundle。

在伺服器端

React 將伺服器組件渲染成一種稱為 React 伺服器組件 Payload（RSC Payload） 的特殊資料格式，其中包含對客戶端組件的引用。
Next.js 使用 RSC Payload 和客戶端組件 JavaScript 指令在伺服器端渲染路由的 HTML。

然後，在客戶端

HTML 用於立即顯示路由的快速非互動式初始預覽。
React 伺服器組件 Payload 用於協調客戶端和伺服器組件樹，並更新 DOM。
JavaScript 指令用於對客戶端組件進行水合 (hydrate) 並使其 UI 具有互動性。

什麼是水合 (hydration)？

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

後續導航

在後續導航中，客戶端組件完全在客戶端渲染，沒有伺服器端渲染的 HTML。

這表示用戶端元件 JavaScript bundle 已下載並解析完成。bundle 準備就緒後，React 會使用 RSC Payload 來協調用戶端和伺服器端元件樹，並更新 DOM。

返回伺服器環境

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

即使理論上程式碼巢狀在用戶端元件內，您仍然可以透過穿插用戶端和伺服器端元件以及伺服器動作，將程式碼保留在伺服器端。詳情請參閱組合模式頁面。