SSG は Static Site Generation の略です。
アプリをビルドするタイミングで HTML ファイルを生成しておき、リクエスト時にはその静的ファイルを返します。
初心者のうちは「事前に画面を作っておいて、そのまま配る方式」と押さえるとつかみやすいです。
まず押さえたいポイント
- ビルド時に HTML が確定するので、表示速度がとても速い
- CDN に置くだけで配信できるので、サーバー構成がシンプル
- コンテンツを更新するたびに再ビルドが必要
- リアルタイムにデータが変わるページには向かない
SSR との違い
SSR はリクエストごとにサーバーで HTML を生成します。 SSG はビルド時に HTML を生成しておき、リクエスト時にはそのまま返します。
表示速度は SSG の方が有利ですが、データが頻繁に変わるページには SSR の方が向いています。
どんな場面で使うか
- ブログやドキュメントサイトなど、更新頻度が低いコンテンツ
- コーポレートサイトや LP（ランディングページ）
- 高速な表示が求められる場面
- CDN ベースの配信でコストを抑えたいとき
ISR という選択肢
ISR（Incremental Static Regeneration）は、SSG と SSR の中間的なしくみです。 静的ページを一定時間ごとにバックグラウンドで再生成するので、「ほぼ静的だけど、たまに中身が更新される」ページに向いています。
実務で見るポイント
- すべてのページを SSG にする必要はない
- 更新頻度とビルド時間のバランスを考える
- ページ数が多いと、ビルド時間が長くなりやすい
- Next.js や Nuxt では、SSG と SSR をページ単位で使い分けられる
最大の弱点はビルド時間です。ページ数が数千規模になると1回の公開に何分もかかるようになり、「誤字を1文字直すだけで全体ビルド」という状態に陥ります。対策は差分ビルドやISRの併用で、記事数が増える見込みなら最初から考えておくと後が楽です。なおヘッドレスCMSと組み合わせる場合、編集者が更新してもビルドが走るまで反映されない点は、運用前に合意しておくべきポイントです。静的中心の設計は Astro も参考になります。