SSG (Static Site Generation)
名詞 · Webアーキテクチャ
すべてのHTMLページがビルド時に事前構築され、CDNから直接配信される静的生成メソッドです。ほぼ瞬時の読み込み時間と動的サーバーの不在による強化されたセキュリティを提供します。
Next.jsが採用するWebアーキテクチャで、動的データ(API、CMS、データベース)をコンパイル時に静的HTMLファイルに変換します。動的サイトの柔軟性と静的サイトの高速性を兼ね備えます。
各ページが独立したHTMLファイルとなるデプロイメント戦略で、コンテンツ配信ネットワーク(CDN)を通じて世界規模で配布でき、アプリケーションサーバーへの依存を排除しホスティングコストを大幅に削減します。
SSG(Static Site Generation)は、ユーザーがサイトを訪問する前のビルドフェーズ中にすべてのHTMLページが事前生成されるWebアーキテクチャ技術です。これらの静的HTMLファイルは、各リクエストごとのサーバーサイド計算なしに、CDNから直接配信されます。Next.jsはこのアプローチに優れており、当社では、コンテンツが即座に利用可能で検索エンジンに完全にインデックス可能な超高速サイトを納品するために使用しています。
SSGは、各ページがJavaScriptの実行を必要とせず、最初のクロール時にGoogleのロボットに完全に読み取り可能な完全なHTMLファイルであるため、SEOに大きな利点を提供します。ほぼ瞬時の読み込み時間は、Googleの公式ランキングファクターであるCore Web Vitalsスコアを直接改善します。当社では、Next.jsを通じてSSGを活用し、コンテンツページを検索結果の上位に位置づけ、サイトを質の高いオーガニックトラフィックの真の磁石に変えています。
SSGはビルド時にHTMLページを一度だけ生成しますが、SSRはサーバー上でユーザーリクエストごとに動的に生成します。SSGはページが事前構築されCDNから配信されるためより高速ですが、頻繁に変更されるコンテンツにはあまり適していません。SSRはパーソナライズされたページやリアルタイムデータに最適です。当社では、各ページのニーズに応じて両方のアプローチの最良の結果を得るため、同一のNext.jsプロジェクト内で両方の戦略を組み合わせることがよくあります。
SSGは、動的アプリケーションの典型的な攻撃対象領域を排除することでサイトのセキュリティを強化します。公開されたアプリケーションサーバーがなく、リアルタイムでアクセス可能なデータベースがなく、注入可能なSQLクエリがありません。CDNから配信される静的HTMLファイルは、通常の脆弱性(SQLインジェクション、サーバーサイドXSS、ブルートフォース攻撃)によって侵害されることはできません。当社では、セキュリティと信頼性が最優先事項であるコーポレートサイトや制度サイトにこのアーキテクチャを推奨しています。
SSGは、ECサイトの商品カタログに完全に適しています。商品ページを事前生成して即座の読み込みと最適なSEOを実現できます。ただし、カート、ユーザーアカウント、決済などの動的ページにはクライアントサイドレンダリング(CSR)が必要です。当社では、カタログページにSSGを、インタラクティブ機能にCSRを組み合わせたNext.jsによるハイブリッドアーキテクチャを設計し、SEOパフォーマンスとスムーズな購入体験の両方を保証しています。
ISR(Incremental Static Regeneration)は、Next.jsが提供するSSGの進化版で、サイト全体を再構築することなく、初期ビルド後に個別の静的ページを再生成できます。従来のSSGがコンテンツを更新するために完全な新規ビルドを必要とするのに対し、ISRは設定可能な間隔でバックグラウンドでページを再検証します。当社では、静的レンダリングの卓越したパフォーマンスを維持しながら、頻繁に更新されるコンテンツが必要なプロジェクトにISRを使用しています。