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 サイトの他の関連記事を参照してください。