静的サイト生成とは？ビルド時に構築される HTML

静的サイト生成（SSG）は、build 中にすべてのページを HTML にレンダリングするので、CDN はリクエストごとのサーバー作業なしにプレーンなファイルを配信できます。

SSR のようにリクエストごとにページをレンダリングする代わりに、SSG は build 時に一度レンダリングします。出力は、任意の CDN が配信できる静的な HTML、CSS、JS、アセットのフォルダです。速く、安く、セキュアで、ソースをデプロイ可能なファイルに変えることが全仕事である CI pipeline にきれいにマッピングされます。

SSG の仕組み

build 中、ジェネレーターはすべてのルートについてページのコードを実行し、必要なデータを取得し、完成した HTML をディスクに書き込みます。ランタイムにはアプリサーバーがありません。CDN はただファイルを返すだけです。

SSG 対 SSR

SSR はリクエストごとにレンダリングするので、コンテンツは常に最新ですが、各リクエストがサーバー時間を要します。SSG は build 時に一度レンダリングするので、配信は無料で即座ですが、次の build までコンテンツは固定されます。SSG は、毎秒変わらないコンテンツに適しています。

静的出力の強み

実行中のサーバーなしに、任意の CDN で配信される。
非常に速く安く、攻撃面が小さい。
些細にキャッシュ可能で、グローバルに配布可能。

鮮度の限界

ページは build 時にベイクされるため、新しいコンテンツには再 build と再 deploy が必要です。何千ものページを持つサイトでは、フル再 build が遅くなり得ます。これはまさに増分アプローチが対処する問題です。

CI/CD での SSG

SSG は最も CI ネイティブなレンダリングモードです。pipeline はジェネレーターを実行し、静的フォルダを生成し、それを CDN や static host にアップロードします。build 時間はページ数とともに増えるので、データ取得をキャッシュし、変更されたページだけを再 build することで pipeline を速く保ちます。

重要なポイント

SSG は build 時にすべてのページを静的な HTML にレンダリングし、リクエストごとのサーバーがありません。
速く、安く、セキュアですが、次の build まではコンテンツが固定されます。
最も CI ネイティブなモードです。フォルダに build し、CDN にアップロードします。