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)}>増加</button>
    </div>
  )
}

'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)}>増加</button>
    </div>
  )
}

'use client' ディレクティブを使用する場合、クライアントコンポーネントのpropsはシリアライズ可能でなければなりません。これは、サーバーからクライアントにデータを送信する際にReactがシリアライズできる形式である必要があることを意味します。

'use client'

export default function Counter({
  onClick /* ❌ 関数はシリアライズ不可能 */,
}) {
  return (
    <div>
      <button onClick={onClick}>増加</button>
    </div>
  )
}

'use client'

export default function Counter({
  onClick /* ❌ 関数はシリアライズ不可能 */,
}) {
  return (
    <div>
      <button onClick={onClick}>増加</button>
    </div>
  )
}

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

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

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

以下の例では:

Header は静的なコンテンツを扱うサーバーコンポーネントです。
Counter はページ内でインタラクティブ性を実現するクライアントコンポーネントです。

import Header from './header'
import Counter from './counter' // これはクライアントコンポーネントです

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

import Header from './header'
import Counter from './counter' // これはクライアントコンポーネントです

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

リファレンス

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

use client ディレクティブ

使用方法

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

リファレンス

On this page