use client

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

知っておくと良いこと

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

使用方法

クライアントコンポーネントのエントリポイントを宣言するには、**ファイルの先頭**、すべてのインポートの前に'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'ディレクティブを使用する場合、クライアントコンポーネントのプロパティはシリアライズ可能である必要があります。これは、Reactがサーバーからクライアントにデータを送信する際にシリアライズできる形式でプロパティが必要であることを意味します。

'use client'
 
export default function Counter({
  onClick /* ❌ Function is not serializable */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

サーバーコンポーネント内でのクライアントコンポーネントのネスト

サーバーコンポーネントとクライアントコンポーネントを組み合わせることで、パフォーマンスが高くインタラクティブなアプリケーションを構築できます。

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

以下の例では

Headerは静的コンテンツを処理するサーバーコンポーネントです。
Counterはページ内でのインタラクティビティを可能にするクライアントコンポーネントです。

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

リファレンス

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