SSG（静的サイト生成）とは

SSGとは

SSG（Static Site Generation、静的サイト生成）とは、Webサイトのページを、ユーザーがアクセスしたときにその都度作るのではなく、公開前の「ビルド」と呼ばれる工程で、あらかじめHTMLファイルとして生成しておく方式のことです。Next.js、Astro、Hugoなどのフレームワークで使われています。

できあがったファイルをサーバーやCDN（世界中に分散配置された配信サーバー）に置いておくだけなので、表示が速く、安全性も高いのが特徴です。

ほかの方式との違い

SSR（サーバーサイドレンダリング）

アクセスのたびにサーバーでページを組み立てる方式。従来のWordPressもこれに近い仕組みです。常に最新の情報を表示できますが、アクセスが集中するとサーバーに負荷がかかります。

CSR（クライアントサイドレンダリング）

ブラウザ側でJavaScriptを使ってページを組み立てる方式。操作性の高いWebアプリに向いていますが、初期表示が遅くなりやすく、SEOで不利になることもあります。

SSG

事前に作っておくため、表示が最速クラスです。更新のたびにビルドが必要という制約があります。

SSGのメリット

• 表示が速い: 完成済みのHTMLを返すだけなので、Core Web Vitalsの改善につながる

• セキュリティが高い: サーバー側でプログラムやデータベースが動かないため、攻撃される箇所が少ない

• サーバー費用が安い: 静的ファイルを置くだけなので、安価なレンタルサーバーやCDNで運用できる

• アクセス集中に強い: テレビで紹介されてアクセスが急増しても落ちにくい

向き・不向き

コーポレートサイト、サービスサイト、ブログ、LPなど、内容の更新頻度がそれほど高くないサイトにはSSGが最適です。一方、会員ごとに表示が変わるマイページや、在庫数がリアルタイムで変わるECサイトなどは、SSRなどと組み合わせる必要があります。

なお、SSGでもお問い合わせフォームや更新しやすい管理画面は実現できます。管理画面にはヘッドレスCMSを組み合わせるのが一般的です。

具体例

Swaaabのコーポレートサイトも、Next.jsのSSG（静的エクスポート）で構築しています。データベースを持たない構成のため、表示速度とセキュリティを両立しつつ、一般的なレンタルサーバーで運用できています。

Next.jsとSEOの関係はNext.js SEOガイドで詳しく解説しています。

関連サービス

Swaaabでは、SSGを活用した高速なWebサイトをWeb制作サービスとして提供しています。