Next.js のレンダリング戦略

こんにちは、お久しぶりです！みなさんはいかがお過ごしでしょうか？

最近、私は Next.js 15 を深く掘り下げて、いくつかの基本的な概念をブラッシュアップし、新しいお気に入りのトピックであるレンダリング戦略を探求しています。これは、SSR (サーバーサイド レンダリング) と Next.js のすべての兄弟戦略の詳細に興味がある人向けです。始めたばかりの場合でも、復習が必要な場合でも、これはレンダリング戦略に関する頼りになるメモだと考えてください!

Next.js の SSR (サーバーサイド レンダリング) と CSR (クライアントサイド レンダリング)

SSRの仕組み

SSR では、Next.js はリクエストごとにサーバー上でページを事前レンダリングします。 Next の機能コンポーネントの先頭にフェッチ リクエストを追加し、[更新] をクリックしてデータを更新したことがある場合は、すでに SSR を使用しています。

最新のアップデートによる革新的なものの 1 つは、serverComponentsHmrCache 機能です。これにより、開発モードでの HMR (ホット モジュール交換) 更新の間、サーバー コンポーネントのフェッチ応答をキャッシュできるようになります。そのため、特に課金された API 呼び出しが含まれる場合、すべての更新がより速く、より安く、より効率的なエクスペリエンスになります。

SSRのメリット：

1. 初期読み込み時間の改善: 特に初めての訪問者にとって、CSR よりも高速です。
2. SEO フレンドリー: クロール時にコンテンツの準備が完了しているため、検索エンジンは SSR を好みます。
3. FCP (First Contentful Paint) の削減: ユーザーにとって認識される読み込みエクスペリエンスの高速化。
4. データベースの直接呼び出し: SSR を使用すると、データ取得ロジックをサーバー側に置くことができるため、API エンドポイントを構築することなくデータベースの直接呼び出しが可能になります。
5. 自動リクエスト重複排除: あまり知られていない特典です。同じデータが複数回リクエストされた場合、リクエストは 1 つだけ送信されます。
6. セキュリティの強化: 機密データをサーバー側に保持し、クライアントに API キーを公開することはありません。
7. ネットワーク ウォーターフォールの削減: SSR はデータを並行して取得し、連続的な遅延を回避します。
8. JS オプション: ブラウザの JavaScript が無効になっている場合でも、ユーザーは引き続きコンテンツにアクセスできます。

CSR (クライアントサイドレンダリング)

CSR では、まず空の状態を宣言し、useEffect 内でフェッチ リクエストを実行します。データが到着したら、状態と UI を更新します。

トレードオフ:

1. 最初は空のページ: データが読み込まれるまでユーザーには空のシェルが表示されます。これはユーザー エクスペリエンスと SEO に影響を与える可能性があります。
2. 状態の完全な制御: ユーザーのアクションによって更新がトリガーされるインタラクティブなページに最適です。

レンダリング戦略の概要

これらのレンダリング方法をそれぞれ確認し、一方を選択する場合とその理由を強調してみましょう。

SSG (静的サイト生成)

SSG はビルド時に HTML を生成し、CDN から超高速で提供できます。ただし、コンテンツが頻繁に更新される Web サイトには適していません。これは Next.js のデフォルトのレンダリング戦略でもあります。

ISR (増分静的再生)

ISR は SSG の柔軟な兄弟です。最初の構築後でもコンテンツを更新できるため、時々変更されるがリアルタイム データを必要としない Web サイトに最適です。 「export const revalidate = 」を追加するだけです。ページごとに設定するか、よりターゲットを絞った再検証のために revalidatePath と revalidateTag を使用します。

SSR (サーバーサイドレンダリング)

SSR は、ユーザーのリクエストごとにサーバー上にページをレンダリングします。つまり、コンテンツは常に最新です。非常に動的なコンテンツには最適ですが、ページがオンデマンドで生成されるため、SSG よりも遅くなる可能性があります。 SSR は、最新のコンテンツは重要だが、クライアント側の対話性は重要ではないシナリオで威力を発揮します。

PPR (プログレッシブ ページ レンダリング)

PPR はハイブリッド アプローチを導入します。ページ レベルではなくコンポーネント レベルで動作するため、ユニークなものになります。静的な SSR シェルが最初に機能しますが、Suspense でラップされたコンポーネントとして動的コンテンツが非同期的に読み込まれます。これにより、同じページ上で SSR と CSR を組み合わせて、静的シェルをすぐに提供し、徐々にインタラクティブ コンテンツを追加することができます。

結論

以上がまとめです！各レンダリング戦略には、アプリケーションの要件に応じて明確な利点があります。いろいろ試して実験し、自分のユースケースに最適なものを見つけてください!
コーディングを楽しんでください!

クレジット: JS Mastery リソースに基づいて、AI フォーマットを少し加えて作成されています

以上がNext.js のレンダリング戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。