【SSG】静的サイトジェネレーター 初心者必見！ゼロから学べる実践入門

静的サイトジェネレーター（SSG）とは？

静的サイトジェネレーター（Static Site Generation）は、ビルド時にHTMLファイルを生成し、これをクライアントに配信する手法です。
これにより、ページの表示速度が向上し、SEOにも有利になります。SSGは、事前に生成されたHTMLファイルを配信するため、動的なコンテンツの必要が少ないサイトに適しています。

SSGのメリット

パフォーマンスの向上: 事前に生成されたHTMLファイルを配信するため、表示速度が速い。
SEOの向上: 検索エンジンが完全なHTMLをインデックスしやすくなる。
セキュリティ: サーバー側でのデータ処理が少ないため、攻撃のリスクが低減される。

基本的なSSGの実装

ページコンポーネント内でgetStaticProps関数を使うことで、SSGを実現できます。

.Next.js

// pages/index.js
export default function Home({ data }) {
  return (
    <div>
      <h1>静的サイト生成の例</h1>
      <p>{data.message}</p>
    </div>
  );
}

export async function getStaticProps() {
  // ビルド時にデータをフェッチ
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

getStaticProps関数は、ビルド時に実行され、データをフェッチしてページコンポーネントに渡します。
このデータは、ビルド時に静的なHTMLとして生成されます。

データフェッチングの実装

外部APIからデータを取得し、それをSSGで表示する例を見てみましょう。
上記の例では、サンプルAPI https://api.example.com/data からデータを取得しています。
APIが返すデータが以下のようなJSONであると仮定します。

{
  "message": "Hello from SSG!"
}

このデータをページに表示するには、getStaticProps関数内でfetchを使ってデータを取得し、propsとしてコンポーネントに渡します。

パフォーマンス最適化のポイント

SSGを実装する際に、パフォーマンスを最適化するためのいくつかのポイントがあります。
キャッシュの活用: ビルド時に生成されたHTMLファイルをキャッシュして、サーバーの負荷を軽減します。
最小限のデータフェッチ: 必要なデータだけをフェッチして、ビルド時間を短縮します。
ビルドの頻度: 頻繁に更新が必要なコンテンツはISR（Incremental Static Regeneration）を利用して、ビルド後も静的ページを再生成します。

例えば、以下のようにISRを使用して、指定された時間後にページを再生成することができます。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // 10秒後に再生成
  };
}

まとめ

静的サイトジェネレーター（SSG）は、ビルド時に静的なHTMLファイルを生成し、ユーザーのリクエストに対してこれらのファイルを配信する手法です。
これにより、パフォーマンスとSEOが向上し、変更の少ないコンテンツに適しています。