loneProgrammer

NextJS:SSG(Static Site Generation)

静的サイト生成(SSG)は、Next.jsの強力な機能で、事前にページを生成してパフォーマンスを最適化します。

概要

  • SSG(スタティックサイトジェネレーション)とは
  • Next.jsのSSG・スタティックサイトジェネレーションは、ビルド時にデータベースやAPIからコンテンツを取得し、静的なHTMLを事前生成する最適化機能です。
  • 以降のリクエストではデータ取得を必要とせず、CDNからの高速な配信が可能となります。
  • これにより、最高のパフォーマンスとユーザー体験を実現し、検索エンジン最適化・SEOにも優れた効果を発揮します。
  • また、Next.jsの公式でもSSGを推奨しています。
  • ただし、一度SSGが適用されると、データに変更があったとしても、特別なアプローチを取らない限り、更新は反映されないので注意が必要です。

主な特徴

  • 最高のパフォーマンス
  • ビルド時にHTMLを生成
  • CDNからの高速配信が可能
  • ユーザーリクエスト時の処理が最小限
  • SEOに最適
  • 完全なHTMLがクローラーに提供される
  • インデックスが容易
  • 高い信頼性
  • サーバー負荷が少ない
  • データベースへの依存が少ない

ユースケース

  • 適用に適したサイト例
  • ブログ
  • ドキュメントサイト
  • マーケティングページ
  • ポートフォリオサイト

制限事項

  • 制限事項
  • リアルタイムデータの表示には不向き
  • 頻繁な更新が必要なコンテンツには適さない

💡 Next.js公式推奨:可能な限りSSGの使用が推奨されています

↓ お勧め記事 ↓