静的サイト生成（SSG）

📖 もうちょい詳しく

何が新しいの？

SSGは「Static Site Generation」の略で、日本語では静的サイト生成といいます。Webページを、人がアクセスしてから作るのではなく、公開前にあらかじめHTMLとして作り置きしておく方法です。アクセスのたびにサーバーで計算する方式が重くなりがちだったため、その負担を前もって済ませておく考え方が見直されました。

どうやって動いてるの？

記事のもとになるデータや文章を集めて、それを表示用のHTMLファイルへと変換する作業を、公開前にまとめて行います。この作り置きのことを「ビルド」と呼びます。出来上がったファイルは、ただ置いておくだけで配れるので、訪問者にはその完成品をそのまま返すだけで済みます。

何ができるの？

表示が速く、サーバーの仕事が軽いサイトを作れます。中身が頻繁には変わらないブログ・用語集・会社案内などと相性がよいです。完成済みのファイルを配るだけなので、世界中に配信網を持つサービス（CDN）にも載せやすくなります。

🌱 身近なたとえ

お弁当の作り置きで例えると分かりやすいです。注文を受けてから一から料理するのが、その都度ページを組み立てる方式です。SSGは、あらかじめお弁当をたくさん作って棚に並べておき、来た人にすぐ手渡すやり方です。受け渡しは速いですが、献立を変えたいときは作り直し（ビルド）が必要になります。

✅ まず覚えるポイント

• SSGは、ページを公開前にHTMLとして作り置きしておく方法です
• 作り置きの作業を「ビルド」と呼びます
• 完成品を配るだけなので、表示が速くサーバーが軽くなります
• 中身があまり変わらないサイトと相性がよいです
• 内容を更新したいときは、もう一度ビルドして作り直します
• CDN（配信網）に載せやすく、世界中へ速く届けられます

🧭 よくある勘違い

一度作ったら内容を更新できないの？

そんなことはありません。文章やデータを直したあとに、もう一度ビルドし直せば最新の内容に置き換わります。ただし、訪問のたびに自動で変わるのではなく、作り直しが反映の合図になる、という点が違いです。

静的だと動きのあるページは作れないの？

作れます。作り置きするのは最初に表示されるHTMLで、ボタンや検索などの動きはブラウザ側のプログラム（JavaScript）が後から受け持ちます。完成済みのHTMLに動きを後付けすることを、ハイドレーションと呼びます。

🧩 関連して覚えると楽な言葉

• SSR: アクセスのたびにサーバーでページを組み立てる、作り置きの逆にあたる方式です
• SPA: 最初に読み込んだ後、画面の切り替えをブラウザ側でこなすサイトの作り方です
• ハイドレーション: 作り置きのHTMLに、後からJavaScriptで動きを付け足すしくみです
• Next.js: SSGやSSRをまとめて扱える、React向けの開発の枠組み（フレームワーク）です

🏁 ひとことでまとめ

SSGは、ページを前もってHTMLに焼き上げておくことで、速くて軽いサイトを実現する作り方です。