title: “Static Site Generation” aliases:
- “SSG”
- “静的サイト生成” status: researched tags:
- “wikidig” sources:
- “https://wikidig.oqzl.net/”
- “https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation”
ビルド時にコンテンツからHTMLなどの静的ファイルを生成し、リクエスト時には生成済みファイルを配信する方式。WikiDigのMarkdownコンテンツ公開に用いられる。
概要
Static Site Generation（SSG）は、ページをあらかじめ生成するレンダリング方式である。生成物は通常の静的ファイルとしてホスティングでき、CDNでキャッシュ・配信できる。
仕組み
MarkdownやCMSのデータ、テンプレートをビルド時に読み込み、各ページのHTMLを出力する。閲覧リクエストごとにサーバーでHTMLを生成しないため、同じ内容を繰り返し高速に配信しやすい。Next.jsでは、外部データをビルド時に取得してページへ渡したり、データに基づいて動的URLの生成対象を列挙したりできる。
向く用途と注意点
ドキュメント、ブログ、ポートフォリオ、製品一覧など、閲覧前に内容を確定できるページに向く。頻繁に変わる情報やリクエストごとに内容が異なるページでは、再ビルド、クライアント側取得、またはサーバーサイドレンダリングを検討する。
WikiDigでの位置づけ
WikiDigではMarkdownで記述した概念ページをビルドし、静的サイトとして公開する。内容の更新は、Markdownを編集して再生成・再デプロイする流れになる。
Related concepts
- Markdown — SSGのビルド入力として概念ページを記述する形式。
- CDN — 生成済みの静的ファイルをキャッシュして配信できる。
- Server-Side Rendering — リクエストごとにHTMLを生成する対照的な方式。