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件を見るヘッドレスCMS
表示用フロントエンド(ヘッド)を持たず、コンテンツ管理とAPIによるデータ提供に特化したCMS。Next.js・Astro等の任意のフロントエンドと組み合わせてJAMstack構成を実現する。
Ruby (ルビー)
「プログラミングを楽しむ」ことを目的に日本のまつもとゆきひろ氏が開発した、美しく書きやすい言語。
IT用語: SOLID原則とは|オブジェクト指向設計の5つの基本原則
保守性の高いソフトウェア設計のためのSOLID原則(単一責任・開放閉鎖・リスコフ置換・インターフェース分離・依存性逆転)を解説。
IT用語: ソフトウェアテストの種類|単体・結合・E2Eテストの違い
ユニットテスト・結合テスト・E2Eテストの役割とテストピラミッドの考え方を解説。
ESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。
WebAssembly(Wasm)
ブラウザ上でネイティブに近い速度で実行できるバイナリ命令形式。C・C++・Rustなどのコードをブラウザで動かすことができ、ゲーム・動画編集・CADなど計算負荷の高いWebアプリに使われる。