use client

use client ディレクティブは、コンポーネントをクライアントサイドでレンダリングするように指定し、ステート管理、イベント処理、ブラウザAPIへのアクセスなど、クライアントサイドのJavaScript機能が必要なインタラクティブなユーザーインターフェース (UI) を作成する際に使用します。これはReactの機能です。

使用法

コンポーネントをクライアントコンポーネントとして指定するには、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>
  )
}

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

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

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

以下の例では

• 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ドキュメントを参照してください。