Next.js では、クライアント側コンポーネント (「クライアントを使用する」) が SSR (サーバー側レンダリング) と連携する方法がわかりにくい場合があります。細かく見てみましょう:

Next.js でのクライアント コンポーネントとサーバー コンポーネントの動作:

• サーバー コンポーネント: これらは Next.js のデフォルトであり、サーバー上で事前にレンダリングされます。これらは JavaScript としてクライアントに送信されるのではなく、HTML としてのみ送信されます。
• クライアント コンポーネント: コンポーネントに「クライアントを使用」とマークすると、そのコンポーネントには対話性 (useState、useEffect など) がある可能性があるため、コンポーネントが クライアント側 で実行される必要があることを意味します。または、サーバー環境では機能しないブラウザ API に依存しています。

クライアント コンポーネントが依然としてサーバー上で HTML をレンダリングする理由:

コンポーネントが「クライアントを使用」としてマークされている場合でも、そのコンポーネントの 初期 HTML は サーバー (SSR) で生成できますが、それは静的 HTML の目的のみです。 。これはつまり：

• 初期レンダリング: サーバーは、パフォーマンスと SEO を向上させるために、クライアント コンポーネントを含むページの HTML を生成します。これは静的な HTML であり、インタラクティブではありません。
• ハイドレーション: この HTML がブラウザーに到達すると、Next.js は JavaScript を使用してクライアント側コンポーネントをハイドレーションし、対話性を有効にします。

なぜこれが起こるのか:

• パフォーマンス: 初期 HTML をサーバーでレンダリングすることにより、ユーザーはクライアント側の JavaScript が読み込まれるのを待たずに、コンテンツをより速く表示できます (最初のバイトまでの時間 (TTFB) が速くなります)。
• SEO: HTML の事前レンダリングは、検索エンジンがコンテンツをクロールしてインデックスに登録できるようにするため、SEO にとって重要です。
• ハイドレーション: HTML が提供されると、Next.js は JavaScript バンドルをクライアントに送信します。これにより、静的 HTML が「ハイドレーション」され、イベント リスナーがアタッチされ、インタラクティブになります。

「クライアントを使用」ではどうなりますか?

• サーバー側の HTML レンダリング: コンポーネントがクライアント側であっても、Next.js は初期ビューの HTML を生成します。したがって、サーバー上でインタラクティブな JavaScript は実行されませんが、HTML マークアップはクライアントに送信されます。
• クライアント側のハイドレーション: インタラクティブ性に必要な JavaScript がクライアントに送信され、ページが読み込まれると、Next.js がコンポーネントをハイドレートして、コンポーネントが完全に機能できるようにします。

誤解:

コンポーネントに「クライアント使用」のマークを付けても、サーバー側で HTML が生成されないというわけではありません。これは単に、インタラクティブな JavaScript がクライアントにのみロードされるが、サーバーはレンダリング用の初期静的 HTML を生成する可能性があることを意味します。

要約すると:

• クライアント コンポーネントの SSR: クライアント コンポーネントの HTML はサーバー上で事前にレンダリングされる場合がありますが (初期ロード用)、クライアント上でハイドレートされるまでインタラクティブではありません。
• "use client": このディレクティブは、クライアント側の対話性のための JavaScript がブラウザー内でのみ実行されるようにしますが、サーバー上での静的 HTML 生成は停止しません。

コンポーネントの動作が異なることを確認したい場合、特にクライアント固有の動作 (ウィンドウやドキュメントへのアクセスなど) が予想される場合は、特定の動的コンテンツをロードする場所と方法を再考する必要がある場合があります。