Next.js 13 の「use client」ディレクティブについて理解する

Next.js 13 では、新しいアプリ ディレクトリの導入により、コンポーネントのレンダリング方法に大きな変化が生じました。デフォルトでは、アプリ ディレクトリ内のコンポーネントはサーバー コンポーネントとして扱われ、サーバー上でレンダリングされます。このデフォルトの動作はパフォーマンスとデータの取得のために最適化されていますが、クライアント側の対話性に関しては制限があります。これに対処するために、Next.js 13 では、コンポーネントまたはファイルをクライアント側 JavaScript として明示的に指定する「use client」ディレクティブを導入しました。

「クライアントを使用」を使用する理由

クライアント側の対話性

コンポーネントがブラウザと対話する必要がある場合 (クリックなどのユーザー イベントの処理、ローカル ストレージへのアクセスなど)、「クライアントを使用」とマークする必要があります。これは、サーバー コンポーネントがブラウザ API、イベント リスナー、またはその他のクライアント側機能にアクセスできないためです。

フックと状態管理

useState、useEffect、useRef などの フックは、クライアント コンポーネントでのみ使用できます。したがって、これらのフックを使用する場合は、ファイルまたはコンポーネントに「クライアントを使用」のマークを付ける必要があります。

イベント処理

React イベント ハンドラー (onClick、onChange など) では、コンポーネントがブラウザーで実行される必要があります。したがって、コンポーネントはクライアント コンポーネントとしてマークされる必要があります。

使用される場所

クライアント側でレンダリングする必要があるコンポーネントのファイルの先頭に「use client」を配置します。

"use client";

import { useState } from "react";

export default function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

重要なポイント

トップレベルディレクティブ

インポートまたは他のコードの前に、ファイルの先頭に配置する必要があります。

範囲

ファイルに「use client」を追加すると、そのファイル内のすべてのコンポーネントがクライアント コンポーネントになり、それらはバンドルされてブラウザ上で実行されます。

選択的使用

サーバー コンポーネントはパフォーマンスとデータ取得の点でより効率的であるため、必要な場合にのみ使用することをお勧めします。

概要

要約すると、「use client」ディレクティブは、デフォルトでサーバー側のレンダリングと最適化を優先するフレームワークでクライアント側の対話型コンポーネントを構築する場合に必要です。コンポーネントをクライアント側として明示的にマークすることで、フックやイベント処理などの React のクライアント側機能を最大限に活用しながら、必要に応じてサーバー側レンダリングのパフォーマンス上の利点を享受できます。

このバランスにより、開発者は必要に応じてサーバー側とクライアント側の両方のレンダリングを利用して、非常にインタラクティブでパフォーマンスの高い Web アプリケーションを作成できます。

以上がNext.js 13 の「use client」ディレクティブについて理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。