Next.js SSR vs SSG vs ISR: 各レンダリングモードの使い分け

判断ルール SSR はリクエストごとに HTML を生成するため、ダッシュボード、アカウントページ、チェックアウトフロー、在庫確認、Cookie、権限、ユーザー状態によって表示内容が変わるあらゆるページに適しています。SSG はビルド時に HTML を生成します。ドキュメント、ヘルプ記事、ランディングページ、長く使えるチュートリアルのような、安定した公開ページに使います。ISR は静的配信の速さを保ちながら、指定した間隔でページを更新できます。ブログ、商品ページ、公開ランキング、比較ガイドに向いています。最も早く判断する方法は、その HTML をキャッシュできるかを考えることです。多くの訪問者に同じ HTML を安全に返せるなら、SSG または ISR を使います。レスポンスが現在のユーザーやリクエストに依存するなら、SSR を使うか、プライベートな部分をクライアント側で取得します。役立つ内部リファレンス: Next.js metadata, PageSpeed checker, meta tag checker, reading time calculator, image format guide.

実践的な選択表 | 状況 | 推奨 | 理由 |

運用チェックリスト レンダリングモードを選ぶ前に、HTML をキャッシュできるか、ソースデータがどれくらいの頻度で変わるか、コンテンツ量に応じてビルド時間が増えるか、SEO メタデータが最初のレスポンスに含まれるかを確認します。画像、フォント、サードパーティスクリプトも見直してください。レンダリング戦略が適切でも、これらがパフォーマンスを落とすことがあります。

FAQ

SSR は SEO に常に有利ですか？

いいえ。SSG と ISR も完全な HTML を送信でき、公開コンテンツでは多くの場合そちらの方が高速です。

最も安全なデフォルトは何ですか？

安定したページには SSG、たまに変わる公開ページには ISR、リクエスト固有のページには SSR を使います。

補足メモ SSR は、ダッシュボード、アカウントページ、チェックアウト状態、在庫確認、Cookie や権限によって形が変わるページなど、リクエストごとに異なる HTML が生成される可能性がある場合に最適です。SSG は、ドキュメント、ヘルプ記事、ランディングページ、長く使えるチュートリアルなど、事前にビルドできるほど安定した公開コンテンツに適しています。ISR はその中間に位置します。静的配信の速さを維持しつつ、選んだ間隔の後にページを更新できるため、ブログ、商品ページ、公開ランキング、比較ガイドに合います。たいていの場合、単純なキャッシュ可能性のテストで正しい方向が見えてきます。同じ HTML を多くの訪問者に安全に提供できるなら、SSG または ISR を選びます。それができないなら、SSR を使うか、プライベートな部分をクライアント側取得に移します。各ルートの判断を記録し、キャッシュヒット率を追跡し、コンテンツ量、更新頻度、パーソナライズが変わったときに選択を見直してください。レンダリング戦略はプロジェクト全体で一度だけ決めるものではなく、ページごとに決めるべきです。