SSG（静的サイト生成）— 作り置きで最速・最安
📖 このページのゴール：SSG（静的サイト生成） が「ビルド時にHTMLを作り置きしておく」やり方だと分かり、なぜ最速・最安・安全なのか、どんな用途に向くかが説明できる。 ← 目次・はじめにへもどる
🍳 たとえ：作り置きを出す
前章の SSR が「注文が来てから厨房で作る」なら、SSG（エスエスジー＝Static Site Generation＝静的サイト生成） は 作り置き です。お店を開ける前に、全部のページのHTMLを作って棚に並べておく。注文（アクセス）が来たら、棚から出すだけ——だから爆速で、厨房（サーバー）すら要りません。
🧩 しくみ（🟢 基礎）
【ビルド時（公開の準備中・1回だけ）】
全ページの HTML を前もって生成 → でき上がった HTML/CSS/JS を CDN に置く
【アクセス時（毎回）】
ブラウザ → CDN から、できあいの HTML を返すだけ（サーバーで毎回作らない）
- 1行ずつ読むと：SSRは「アクセスのたびにサーバーがHTMLを作る」のに対し、SSGは「前もって1回だけ作って、あとは配るだけ」。だから速くて安い、というわけです。
- CDN（しーでぃーえぬ）＝世界中に置いた配信用の倉庫。近くの倉庫から届くので速い。
👍 向いている / 👎 向かない
| 👍 強い | 表示が最速（できあいを返すだけ）・最安（サーバー処理ゼロ、CDN配信は激安/無料も）・安全（動く部分が少ない＝攻撃される面が小さい）・サーバー運用が要らない |
| 👎 弱い | ログイン後の人ごとに違う画面や頻繁に変わるデータは苦手・ページ数が膨大だとビルドが長い・内容を変えたら作り直し（再ビルド）が要る |
💡 つまり SSG は「みんなに同じものを見せる・あまり変わらないページ」にぴったり。ブログ・LP（ランディングページ）・ドキュメント・会社サイトが代表例です。——ちなみに、いまあなたが読んでいるこのサイト自身も、Markdown から静的に生成されたページです。
🛠 代表的なツール
- Astro（アストロ）… いま人気。中身が静的なサイトを高速に作れる（第9章のアイランドも得意）。
- Next.js（React）／Nuxt（Vue）… SSR もできるが、SSG（静的書き出し）も選べる。
- Hugo / Eleventy / Gatsby / Jekyll … 老舗〜定番の静的サイトジェネレーター。
🔧 ISR（増分静的再生成）：SSG の弱点「更新は再ビルド」をやわらげるしくみ。古くなったページだけ、あとからこっそり作り直す（Next.js などが対応）。「ほぼ静的だけど、たまに更新したい」ニュース系に便利。
🔒 ひとことだけ安全の話
SSG は HTML を配るだけなので、サーバー側の処理がほぼありません。秘密の鍵を扱う処理は、そもそも置き場所がない（置いてはいけない）。動的な処理や秘密が必要になったら、SSR / サーバーレス関数（第9・10章）に出します。
🟢 ひとことで言うと
SSG＝ビルド時にHTMLを作り置き → CDNから配るだけ。だから最速・最安・安全。ブログ・LP・ドキュメントなど「みんなに同じ・あまり変わらない」ページの王道です。動的・人ごとの画面が要るなら SSR やハイブリッドへ。
➡️ 次へ
「SPA（ブラウザ）」「SSR（サーバー）」「SSG（作り置き）」と見てきました。次章では、これらをページごとに混ぜられる——そして「Reactの一部をサーバーで動かす」——メタフレームワーク（Next.js / Nuxt / Astro） を見ます。