SSG(静的サイトジェネレーター)
ビルド時にすべてのページをHTMLとして事前生成する手法。サーバーが不要なため高速・安全・低コストで、ブログ・ドキュメントサイト・ランディングページに最適。
SSG(Static Site Generator)とは?
SSG(Static Site Generator、静的サイトジェネレーター)は、ビルド時にすべてのページをHTMLファイルとして事前生成する手法・ツールです。実行時にサーバーサイドの処理が不要なため、CDNから配信でき高速・低コスト・高セキュリティを実現します。
SSGのメリット・デメリット
| 項目 | メリット | デメリット |
|---|---|---|
| 速度 | HTMLを直接配信するため最速 | — |
| セキュリティ | サーバーサイド処理がないため攻撃面が小さい | — |
| コスト | Cloudflare Pages等で無料ホスティング可 | — |
| データ更新 | — | コンテンツ変更のたびに再ビルドが必要 |
| 動的機能 | — | ログイン・検索等は別途APIが必要 |
主なSSGフレームワーク
| フレームワーク | 特徴 |
|---|---|
| Astro | 複数FWのコンポーネントを使用可能・軽量 |
| Next.js | ページ単位でSSG/SSR/ISRを選択可能 |
| Hugo | Go製・超高速ビルド |
| Gatsby | React製・GraphQL統合 |
| Eleventy(11ty) | シンプル・柔軟 |
ISR(Incremental Static Regeneration)
Next.jsのISRは「SSGの速度」と「SSRの鮮度」を両立する手法です。一定時間ごとにバックグラウンドで再生成します。
まとめ
このサイト(tool.lapis-tech.jp)もAstroによるSSGで構築されており、高速性とSEOを両立しています。
関連する用語 (プログラミング)
全33件を見るJAMstack
JavaScript・APIs・Markupの頭文字をとったWebアーキテクチャ。ビルド時に静的HTMLを生成し、動的機能はAPIで補完することで高速・安全・スケーラブルなWebサイトを実現する。
Jest(ジェスト)
MetaがReact向けに開発したJavaScript/TypeScriptのテストフレームワーク。ゼロ設定で動作・スナップショットテスト・モック機能を標準搭載し、フロントエンドテストのデファクトスタンダード。
Vite(ヴィート)
Vue.jsの作者が開発した次世代フロントエンドビルドツール。ネイティブESモジュールを活用した超高速な開発サーバー起動とHMR(ホットモジュールリプレース)を実現する。
Webpack(ウェブパック)
JavaScriptアプリの依存関係を解析して複数のファイルを1つ(または少数)のバンドルにまとめるモジュールバンドラー。CSS・画像等も処理でき、フロントエンドビルドツールの長年の標準。
IT用語: 依存性の注入(DI)とは|テストしやすいコードを書く設計原則
クラスが依存するオブジェクトを外部から渡す「依存性の注入(Dependency Injection)」の概念とテスタビリティへの効果を解説。
Ruby (ルビー)
「プログラミングを楽しむ」ことを目的に日本のまつもとゆきひろ氏が開発した、美しく書きやすい言語。