Next.js の &#use client&# ディレクティブを理解する: クライアント側コンポーネントの説明

皆さん、この記事では、Next.js のアプリ ルーター バージョンで「use client」ディレクティブを使用する理由を探っていきます。また、プリレンダリングとは何か、サーバー コンポーネントとクライアント コンポーネントの違い、およびこれらの概念がすべて「クライアントの使用」にどのように関連するかについても詳しく説明します。これらの概念を理解することで、Next.js のスキルを向上させることができます。それでは、Next.js でのプリレンダリングを始めましょう!

Next.js のプリレンダリングとは何ですか?

Next.js でのプリレンダリング (生成) は、各ページの HTML を事前に作成する方法であり、SEO とパフォーマンスの両方に有益です。 Next.js はデフォルトでプリレンダリングを使用し、静的生成とサーバーサイド レンダリングの両方を可能にし、このメソッドはクライアントやブラウザーではなくサーバー上で実行されます。

「クライアントを使用」とは何ですか?

Next.js では、サーバー上でページを事前レンダリングするか、ブラウザーのクライアント上でページをレンダリングするかを選択できます。サーバーによってコンポーネントを生成または事前レンダリングしたい場合は、何もする必要はありません。デフォルトでは、すべてのコンポーネントが Next.js のサーバー上で実行されます。ただし、コンポーネントをクライアント上で実行したい場合は、コンポーネントの先頭に「use client」を追加する必要があります。 「クライアントを使用」は、クライアント コンポーネントを定義するために使用される規則です。

注: コード内でフックを使用したりイベントを処理したりする必要がある場合、コンポーネントはクライアント コンポーネントである必要があるため、「use client」を追加する必要があります。親コンポーネントに「use client」をすでに追加している場合は、すべての子コンポーネントに再度追加する必要はありません。すべての子コンポーネントは自動的にクライアント コンポーネントとして扱われます。

最後に、CSR、SSR、SSG、ISR に関する記事全文を読むことができます。

以上がNext.js の &#use client&# ディレクティブを理解する: クライアント側コンポーネントの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。