Next.jsにおけるSSR、SSG、ISRとは何か？

Question

Accepted Answer

これらは、ページのHTMLが生成される*タイミング*に関する3つの主要な戦略です。ページごとに適切な戦略を選択することで、鮮度、パフォーマンス、サーバーコストのバランスを取ります。 ## SSG — Static Site Generation（ビルド時） ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` ページはビルド時に静的HTMLに事前レンダリングされ、CDNにキャッシュされます。**最速の**配信が可能ですが、コンテンツは次のビルドまで固定されます。めったに変わらないコンテンツに最適です：マーケティングページ、ドキュメント、ブログ投稿。 ## SSR — Server-Side Rendering（リクエストごと） ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` サーバーはリクエストごとにページをレンダリングするため、データは常に最新ですが、毎回のアクセスでレスポンスが遅くなり、サーバー負荷が増加します。パーソナライズされた、または常に最新のデータが必要なコンテンツに最適です：ダッシュボード、アカウントページ、検索結果。 ## ISR — Incremental Static Regeneration（ハイブリッド） ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISRは静的HTML（高速、CDNキャッシュ）を提供しますが、**バックグラウンドでスケジュールに従って再検証**されるため、サイト全体を再構築することなく、静的パフォーマンスと定期的に更新されたデータを両立できます。時々変わるコンテンツに最適です：商品一覧、ニュース、ランキング。 ## 比較 ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## なぜ重要なのか App Routerでは、これらを特別な関数ではなく、キャッシュオプション（`force-cache` = SSG、`no-store` = SSR、`revalidate` = ISR）でフェッチごとに選択します。静的は最速だが古い、SSRは新しいが高コスト、ISRはその両方のバランスを取る、というトレードオフを理解することで、パフォーマンスとデータ鮮度の適切な組み合わせのために各ページを最適化できます。