use client

use client 指令指定元件將在客戶端上渲染，並且應該在建立需要客戶端 JavaScript 功能（例如狀態管理、事件處理和存取瀏覽器 API）的互動式使用者介面 (UI) 時使用。這是 React 的功能。

用法

若要將元件指定為客戶端元件，請在檔案頂端、任何 import 語句之前，新增 use client 指令

app/components/counter.tsx

'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>
  )
}

在伺服器元件中巢狀客戶端元件

結合伺服器和客戶端元件，您可以建構兼具效能和互動性的應用程式

伺服器元件：用於靜態內容、資料抓取和 SEO 友善的元素。
客戶端元件：用於需要狀態、效果或瀏覽器 API 的互動式元素。
元件組合：根據需要將客戶端元件巢狀於伺服器元件中，以清楚區分伺服器和客戶端邏輯。

在以下範例中

Header 是一個伺服器元件，用於處理靜態內容。
Counter 是一個客戶端元件，用於啟用頁面內的互動性。

app/page.tsx

import Header from './header'
import Counter from './counter' // This is a Client Component
 
export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

參考資料

請參閱 React 文件以取得關於 use client 的更多資訊。