use client

'use client' ディレクティブは、コンポーネントをクライアント側でレンダリングするエントリーポイントを宣言するもので、状態管理、イベントハンドリング、ブラウザ API へのアクセスなど、クライアント側の JavaScript 機能を必要とするインタラクティブなユーザーインターフェース（UI）を作成する際に使用します。これは React の機能です。

補足：

Client Component を含む全てのファイルに 'use client' ディレクティブを追加する必要はありません。Server Component 内で直接レンダリングしたいコンポーネントを含むファイルにのみ追加してください。'use client' ディレクティブはクライアント・サーバー境界を定義し、そのようなファイルからエクスポートされたコンポーネントがクライアントのエントリーポイントとなります。

使用方法

Client Component のエントリーポイントを宣言するには、'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' ディレクティブを使用する際、Client Component の props はシリアライズ可能である必要があります。これは、サーバーからクライアントにデータを送信する際、React がシリアライズできる形式である必要があることを意味します。

'use client'
 
export default function Counter({
  onClick /* ❌ 関数はシリアライズできません */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

Server Component 内への Client Component のネスト

Server Component と Client Component を組み合わせることで、パフォーマンスとインタラクティビティの両立したアプリケーションを構築できます。

1. Server Component：静的なコンテンツ、データ取得、SEO 対応要素に使用します。
2. Client Component：状態、エフェクト、またはブラウザ API を必要とするインタラクティブな要素に使用します。
3. コンポーネント構成：サーバーとクライアントのロジックを明確に分離するため、必要に応じて Client Component を Server Component 内にネストします。

以下の例では：

• Header は静的なコンテンツを処理する Server Component です。
• Counter はページ内のインタラクティビティを有効にする Client Component です。

import Header from './header'
import Counter from './counter' // これは Client Component です
 
export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

リファレンス

'use client' に関する詳細情報は React ドキュメントを参照してください。