JAMstackは、JavaScript・APIs・Markupの頭文字を取ったモダンなWeb構築アーキテクチャです。事前ビルド・APIによる動的処理・CDN配信を組み合わせ、従来のCMSにない高速性とセキュリティを実現します。本記事では、JAMstackの基本と従来CMSとの違いを解説します。
JAMstackの基本構成
- JavaScript：ブラウザでの動的処理
- APIs：Headless CMSや認証・決済などの再利用可能なサービス
- Markup：事前ビルドされた静的HTML/Markdown
従来CMSとの違い
- 従来CMS：リクエストごとにサーバーでHTMLを生成（PHP+DBなど）
- JAMstack：ビルド時に静的HTMLを生成、CDN配信。動的処理はAPIに分離
主なメリット
- 圧倒的に速い：CDNから静的HTMLを配信、TTFBが極小
- セキュア：DBや動的サーバーがフロントに露出しない
- スケーラブル：CDNで自動スケール、急なトラフィックにも強い
- 運用コスト低：サーバー保守が不要、サーバーレス連携が容易
典型的なスタック例
- Markup生成：Next.js / Astro / Nuxt / Hugo / Gatsby
- コンテンツ：microCMS / Contentful / Sanity / Markdown
- 動的処理：Vercel Functions / Cloudflare Workers / AWS Lambda
- ホスティング：Vercel / Netlify / Cloudflare Pages
動的要素の扱い方
「JAMstackは静的だから動的処理ができない」と誤解されがちですが、認証・フォーム送信・コメント・ECなどは外部APIやサーバーレス関数で実現できます。Next.jsのISR（Incremental Static Regeneration）やAstroのSSR/hybrid機能を併用すれば、より柔軟に動的化できます。
向いているサイト
- ブログ、メディア、コーポレートサイト
- ドキュメントサイト、ランディングページ
- EC（決済・在庫はAPI連携）
- マーケティング施策の高速A/Bテスト基盤
注意点
- 大量ページのビルド時間が伸びやすい（ISRや差分ビルドで緩和）
- 動的機能は外部API依存になるため、組み合わせ設計が重要
- プレビュー機能を整えるのに一工夫いる
まとめ
JAMstackは「速い・安全・運用が楽」の三拍子を実現するモダンなアーキテクチャです。Next.js / Astro + Headless CMS + Vercelの組み合わせは、メディアやコーポレートサイトのデファクトになりつつあります。新規構築時にまず候補に入れたい構成です。
