use client

'use client' 指令宣告了一個元件在客戶端 (client side) 渲染的進入點，應該在建立需要客戶端 JavaScript 功能的互動式使用者介面 (UI) 時使用，例如狀態管理、事件處理和存取瀏覽器 API。這是 React 的一項功能。

小知識：

您不需要在每個包含客戶端元件 (Client Components) 的檔案中都添加 'use client' 指令。您只需要在那些您希望直接在伺服器元件 (Server Components) 中渲染的元件的檔案中添加它。'use client' 指令定義了客戶端與伺服器端的邊界，從此類檔案匯出的元件將作為客戶端的進入點。

使用方法

要宣告客戶端元件的進入點，請在檔案的頂部、任何 import 語句之前添加 'use client' 指令：

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

使用 'use client' 指令時，客戶端元件的 props 必須是可序列化的 (serializable)。這意味著 props 需要符合 React 在從伺服器向客戶端傳送資料時可以序列化的格式。

'use client'

export default function Counter({
  onClick /* ❌ 函式不可序列化 */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

在伺服器元件中嵌套客戶端元件

結合伺服器元件和客戶端元件可以讓您建立既高效能又互動的應用程式：

1. 伺服器元件 (Server Components)：用於靜態內容、資料獲取和 SEO 友好的元素。
2. 客戶端元件 (Client Components)：用於需要狀態、效果或瀏覽器 API 的互動元素。
3. 元件組合 (Component composition)：根據需要在伺服器元件中嵌套客戶端元件，以清晰分離伺服器和客戶端邏輯。

在以下範例中：

• Header 是一個處理靜態內容的伺服器元件。
• Counter 是一個在頁面內啟用互動功能的客戶端元件。

import Header from './header'
import Counter from './counter' // 這是一個客戶端元件

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

參考資料

有關 'use client' 的更多資訊，請參閱 React 文件。