Next.js ISR（Incremental Static Regeneration）を初心者でもわかるように徹底解説！SSGを強化する最新技術

1. Next.js ISRとは？基本の仕組みを理解しよう

1. Next.js ISRとは？基本の仕組みを理解しよう

Next.js ISR（Incremental Static Regeneration）は、静的サイト生成（SSG）と動的サイト生成（SSR）のいいとこ取りの技術です。通常のSSGでは、ビルド時にHTMLが生成され、サーバーに配置されます。しかし、ISRでは、ビルド後でもページの再生成を設定した時間ごとに行うことができます。

これにより、最新情報を反映した静的ページを効率よく配信でき、ユーザー体験が向上します。

2. ISRを使うメリットは何ですか？

2. ISRを使うメリットは何ですか？

ISRの最大のメリットは次の通りです。

• 最新情報を自動で反映できる
• サーバー負荷を抑えつつ高速表示が可能
• ビルドの時間を短縮できる

例えば、ニュースサイトやECサイトの商品一覧ページなど、頻繁に更新される情報を扱う場合に非常に便利です。

3. ISRの基本的な使い方

3. ISRの基本的な使い方

ISRを使うには、Next.jsのページでgetStaticProps関数を使用し、revalidateというオプションを設定します。これにより、指定した秒数ごとにページが再生成されます。

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

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

function Posts({ posts }) {
  return (
    <div>
      <h1>最新記事一覧</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

4. ISRと通常のSSGの違い

4. ISRと通常のSSGの違い

通常のSSGはビルド時にしかページが生成されません。したがって、データが変更されても再ビルドを行うまで反映されません。ISRを使うと、再生成タイミングを設定できるため、最新データを静的ページで提供しつつ高速表示も実現できます。

5. ISRで便利な活用例

5. ISRで便利な活用例

ISRは様々なシーンで活用できます。例えば：

• ブログの投稿一覧や詳細ページ
• ECサイトの商品一覧や在庫情報
• ニュース速報やイベント情報のページ

これらのページでは、ユーザーに常に最新情報を提供しながら、ページ表示の高速化も可能です。

export async function getStaticProps() {
  const products = await fetch("https://api.example.com/products").then(res => res.json());

  return {
    props: { products },
    revalidate: 60, // 1分ごとに再生成
  };
}

function ProductList({ products }) {
  return (
    <div>
      <h1>商品一覧</h1>
      {products.map(p => (
        <div key={p.id}>{p.name} - {p.price}円</div>
      ))}
    </div>
  );
}

export default ProductList;

6. ISRを使うときの注意点

6. ISRを使うときの注意点

ISRを使用する際にはいくつかの注意点があります。

• 再生成の間隔（revalidate）は短すぎるとサーバー負荷が高くなる
• 大規模サイトではキャッシュ戦略も考慮する
• APIのレスポンスが遅い場合、ページ生成が遅延することがある

適切な間隔を設定し、キャッシュやCDNを活用することでISRを最大限活かせます。

7. ISRとSSG/SSRの違いを図でイメージしよう

7. ISRとSSG/SSRの違いを図でイメージしよう

簡単にイメージすると：

• SSG: ビルド時に全ページ生成 → データ更新には再ビルド
• SSR: リクエストごとにページ生成 → 常に最新だが表示が遅くなる場合あり
• ISR: ビルド時に生成＋設定時間ごとに再生成 → 高速表示＋最新情報提供

この仕組みにより、ISRは高速性と最新性を両立できるNext.jsの画期的な技術です。

8. ISRのまとめ的ポイント

8. ISRのまとめ的ポイント

Next.jsのISRは、SSGを強化するための技術で、静的ページを高速に表示しつつ、最新データを定期的に反映できます。

• getStaticPropsとrevalidateを使って設定する
• ブログ、ECサイト、ニュースサイトに特に有効
• キャッシュや再生成間隔を工夫してパフォーマンス最適化

export async function getStaticProps() {
  const news = await fetch("https://api.example.com/news").then(res => res.json());

  return {
    props: { news },
    revalidate: 30, // 30秒ごとに再生成
  };
}

function NewsList({ news }) {
  return (
    <div>
      <h1>最新ニュース</h1>
      {news.map(n => (
        <div key={n.id}>{n.title}</div>
      ))}
    </div>
  );
}

export default NewsList;

まとめ

まとめ

本記事ではNext.jsのISR（Incremental Static Regeneration）について、初心者でも理解できるように徹底的に解説しました。ISRは静的サイト生成（SSG）の利便性を活かしつつ、ページを必要なタイミングで自動更新できる仕組みで、ブログやニュースサイト、ECサイトなど、頻繁にデータが変わるページで特に有効です。従来のSSGではページ更新に再ビルドが必要で時間や手間がかかりましたが、ISRを使うことで最新情報を効率的に配信できます。

ISRを導入する際にはgetStaticProps関数とrevalidateオプションを活用することが基本で、再生成の間隔を適切に設定することでサーバー負荷を抑えつつ高速表示が可能です。ニュース速報や商品情報のようにリアルタイム性が求められるデータも、ISRなら静的ページとして高速に提供しつつ最新情報を反映できます。また、キャッシュやCDNを併用することでさらにパフォーマンスを向上させることができます。

本記事で紹介した活用例やポイントをまとめると以下の通りです。

• 静的ページの高速表示と最新情報の自動更新を両立できる
• ブログやニュース、ECサイトなど頻繁に更新が必要なページに最適
• getStaticPropsとrevalidateで再生成のタイミングを柔軟に設定可能
• サーバー負荷やパフォーマンスを考慮した再生成間隔の設定が重要
• キャッシュやCDNと組み合わせることで最適化できる

サンプルプログラム

export async function getStaticProps() {
  const posts = await fetch("https://api.example.com/posts").then(res => res.json());

  return {
    props: { posts },
    revalidate: 15, // 15秒ごとに自動再生成
  };
}

function PostList({ posts }) {
  return (
    <div>
      <h1>最新記事一覧</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;