IT Dev
⚡
Next.js SSR・SSG・ISRの使い分けガイド
Next.js SSR・SSG・ISRの使い分けガイド - 重要な基準、チェックリスト、関連ツール、FAQをまとめたMillionsCode実用ガイドです。
Next.js SSR・SSG・ISRの使い分けガイド
判断の軸
SSRはリクエストごとにHTMLを生成する方式です。ログイン後のダッシュボード、注文状態、在庫、権限確認、Cookieで表示が変わるページに向いています。最新性と個別性を優先できますが、毎回サーバー処理が走るため、DB遅延、キャッシュ、運用コストを同時に見ます。
SSGはビルド時にHTMLを作る方式です。会社紹介、ヘルプ、規約、長く読まれるチュートリアルなど、変更が少ない公開ページに向いています。CDNから高速に返せるので、SEOと表示速度の土台を作りやすいです。
ISRは静的配信の速さを保ちながら、指定した間隔でページを再生成します。ブログ、商品詳細、公開ランキング、比較記事のように、公開コンテンツだが時々更新したいページで実用的です。
参考リンク: Next.js metadata, PageSpeed checker, meta tag checker, reading time calculator, image format guide.
FAQ
SSRはSEOで常に有利ですか
いいえ。SSGとISRも完成したHTMLを返せるため、公開コンテンツでは十分に強い選択です。
ブログには何を使いますか
記事数が少なく更新が少ないならSSG、記事数が多く更新もあるならISRが扱いやすいです。