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件を見るIT用語: ソフトウェアテストの種類|単体・結合・E2Eテストの違い
ユニットテスト・結合テスト・E2Eテストの役割とテストピラミッドの考え方を解説。
Jest(ジェスト)
MetaがReact向けに開発したJavaScript/TypeScriptのテストフレームワーク。ゼロ設定で動作・スナップショットテスト・モック機能を標準搭載し、フロントエンドテストのデファクトスタンダード。
IT用語: SOLID原則とは|オブジェクト指向設計の5つの基本原則
保守性の高いソフトウェア設計のためのSOLID原則(単一責任・開放閉鎖・リスコフ置換・インターフェース分離・依存性逆転)を解説。
IT用語: リファクタリングとは|外から見た動作を変えずに内部を改善する
コードの外部動作を保ちながら内部構造を整理するリファクタリングの目的・手法・タイミングを解説。
IT用語: DRY原則とは|「繰り返しを避けよ」というプログラミングの鉄則
Don't Repeat Yourself(DRY)原則の意味と、WET(重複だらけ)なコードが引き起こす問題と対処法を解説。
モノレポ(Monorepo)
複数のプロジェクトやパッケージを1つのGitリポジトリで管理する手法。コードの共有・一貫したCI/CD・依存関係の統一が容易になる。Turborepo・Nx・Yarnワークスペースで実装される。