Next.js ISR（Incremental Static Regeneration）の仕組みを徹底解説！初心者でもわかるrevalidateによる再生成

1. ISRとは何か？

1. ISRとは何か？

ISR（Incremental Static Regeneration）はNext.js独自の機能で、静的サイト生成（SSG）の利点を保ちながら、ページを必要に応じて更新できる仕組みです。静的生成はビルド時にHTMLを作りますが、ISRを使うと、公開後でもサーバー側でHTMLを再生成できます。

2. revalidateの基本的な使い方

2. revalidateの基本的な使い方

ISRではgetStaticProps関数の中でrevalidateを設定します。これは「この秒数が経ったら次のリクエスト時にページを再生成する」という意味です。

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

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

function Page({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

export default Page;

3. ISRの仕組みを図で理解しよう

3. ISRの仕組みを図で理解しよう

ISRの流れは簡単に言うと3ステップです。

1. 最初のビルド時に静的HTMLを生成して公開
2. ユーザーがアクセスしたとき、指定時間(revalidate)が経過していなければ既存HTMLを表示
3. 指定時間が経過していた場合、古いHTMLをユーザーに見せつつバックグラウンドで新しいHTMLを生成、次のアクセスから最新HTMLを表示

4. ISRでAPIデータを動的に反映する例

4. ISRでAPIデータを動的に反映する例

例えばニュース一覧ページで、最新記事を反映させたい場合にISRは便利です。

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

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

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

export default NewsPage;

5. ISRのメリットと注意点

5. ISRのメリットと注意点

ISRを使うメリットは以下です。

• 静的生成の高速表示を維持できる
• 公開後もバックグラウンドで最新データを反映できる
• トラフィックが多くても効率的にページを生成できる

注意点としては、revalidate時間内は古いデータが表示されるため、リアルタイム性が必要な場合はSSR（Server-Side Rendering）を検討する必要があります。

6. ISRを使った簡単なカウント表示の例

6. ISRを使った簡単なカウント表示の例

ユーザー訪問ごとにカウントを更新したい場合もISRで実現可能です。

let counter = 0;

export async function getStaticProps() {
  counter += 1;

  return {
    props: {
      count: counter,
    },
    revalidate: 5, // 5秒ごとに更新
  };
}

function CounterPage({ count }) {
  return (
    <div>
      <h1>訪問カウント: {count}</h1>
    </div>
  );
}

export default CounterPage;

7. ISRで静的サイトの利便性を最大化する方法

7. ISRで静的サイトの利便性を最大化する方法

ISRを上手に使うことで、静的サイトの高速表示と動的更新を両立できます。ポイントは以下です。

• 頻繁に更新されるページはrevalidate時間を短めに設定
• あまり変わらないページは長めに設定し、生成コストを下げる
• APIデータやCMSと組み合わせて自動更新を活用

8. ISRのデバッグや確認方法

8. ISRのデバッグや確認方法

ISRの動作を確認するには、ページアクセス時のHTMLを確認したり、サーバーログで再生成タイミングを確認できます。また、revalidate時間を短くして挙動をテストするのも有効です。

export async function getStaticProps() {
  console.log("ページが再生成されました");
  return {
    props: {
      message: "ISRデバッグ中",
    },
    revalidate: 3,
  };
}

function DebugPage({ message }) {
  return <h1>{message}</h1>;
}

export default DebugPage;

まとめ

まとめ

Next.jsのISR（Incremental Static Regeneration）は、静的サイト生成（SSG）の利便性と動的データ更新の柔軟性を両立させる画期的な機能です。従来の静的生成では、ビルド時にHTMLが固定され、公開後の更新には再デプロイが必要でした。しかしISRを活用すると、getStaticPropsでrevalidateを設定するだけで、指定秒数ごとにバックグラウンドでページを再生成できます。この仕組みにより、ユーザーに古いHTMLを見せつつ、次回アクセス時には最新のHTMLが自動で反映されるため、更新頻度の高いコンテンツも効率的に管理可能です。また、ISRはAPIやCMSと組み合わせることで、ニュースサイトやブログ、商品情報ページなどで最新データを反映させる用途に最適です。

ISRを実際に導入する際のポイントは、ページごとの更新頻度に応じてrevalidateの秒数を調整することです。頻繁にデータが変わるページは短めの秒数を設定し、あまり更新されないページは長めに設定することで、サーバーの負荷を最小限に抑えつつ、ユーザーには常に高速な静的ページを提供できます。さらに、ISRは静的生成の高速表示を維持できるため、SEOやユーザー体験の観点でも有利です。ページのデバッグや挙動確認は、コンソールログや短いrevalidate秒数を活用して行うことが推奨されます。

実際のReactコードでのISR利用例としては、以下のようにgetStaticProps内でAPIからデータを取得し、revalidateを設定するだけで簡単に実装可能です。

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

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

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

export default PostsPage;

また、ユーザー訪問数やカウント表示のような動的要素もISRで更新可能です。ページにアクセスするたびにカウントが増加し、revalidate秒数が経過するとバックグラウンドで最新値に更新されます。これにより、静的サイトの利便性を維持しながら、動的データも適切に反映できます。

let counter = 0;

export async function getStaticProps() {
  counter += 1;

  return {
    props: {
      count: counter,
    },
    revalidate: 5, // 5秒ごとに更新
  };
}

function CounterPage({ count }) {
  return (
    <div>
      <h1>訪問カウント: {count}</h1>
    </div>
  );
}

export default CounterPage;

ISRは静的生成の高速表示と、動的更新の両立を可能にするため、SEOやユーザー体験を最適化する上で非常に有用です。頻繁に更新されるニュースやブログ、商品情報、カウント表示など、あらゆるWebサイトで応用できる柔軟性が特徴です。さらに、デバッグや挙動確認も簡単に行え、Next.jsを使ったWeb開発の幅を広げる技術として非常に実践的です。