Next.js ISR（Incremental Static Regeneration）が必要になるケースを初心者向けに解説

1. ISRとは何かを初心者向けに解説

1. ISRとは何かを初心者向けに解説

ISRとは「Incremental Static Regeneration」の略で、静的生成されたページを部分的に自動更新できる仕組みです。静的生成は高速ですが、一度生成すると内容が変わりません。ISRを使うと、生成済みのページをキャッシュしたまま、新しい情報が必要なタイミングで更新できます。

2. ISRが必要になるケース1：ニュースサイトやブログ

2. ISRが必要になるケース1：ニュースサイトやブログ

ニュースやブログ記事は、日々新しい情報が追加されます。全てのページを毎回サーバーサイドで生成するSSR（Server Side Rendering）もできますが、アクセスが多いとサーバーに負荷がかかります。ISRを使うと、古いページはキャッシュしつつ、一定時間ごとに新しい記事に更新できるため、表示速度と最新情報のバランスが取れます。

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

  return {
    props: { posts },
    revalidate: 60, // 60秒ごとにページを再生成
  };
}

3. ISRが必要になるケース2：商品一覧やECサイト

3. ISRが必要になるケース2：商品一覧やECサイト

ECサイトの商品在庫や価格は頻繁に変わることがあります。全てをリアルタイムでSSRするよりも、ISRでキャッシュを使いつつ更新する方がサーバー負荷が少なく効率的です。

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

  return {
    props: { products },
    revalidate: 300, // 5分ごとにページを再生成
  };
}

4. ISRが必要になるケース3：ランキングや人気記事の更新

4. ISRが必要になるケース3：ランキングや人気記事の更新

ユーザーのアクセス数や人気度に応じてランキングを更新したい場合、ISRが便利です。ランキングデータをリアルタイムに取得するSSRよりも、キャッシュを使ったISRの方が高速で表示できます。

export async function getStaticProps() {
  const res = await fetch('https://example.com/top-articles');
  const topArticles = await res.json();

  return {
    props: { topArticles },
    revalidate: 120, // 2分ごとに再生成
  };
}

5. ISRが必要になるケース4：天気やイベント情報などの定期更新

5. ISRが必要になるケース4：天気やイベント情報などの定期更新

天気予報やイベント情報など、数分ごとに情報が変わるものは、完全なSSRではなくISRを使うことで効率的に最新情報を表示できます。これにより、アクセスが集中しても高速に表示できます。

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

  return {
    props: { weather },
    revalidate: 600, // 10分ごとにページを再生成
  };
}

6. ISRを使うとSEOと表示速度の両方に効果的

6. ISRを使うとSEOと表示速度の両方に効果的

ISRは静的生成のメリットである高速表示を維持しつつ、古くなった情報を自動で更新できます。そのため、検索エンジンにも最新情報を提供でき、SEOにも有利です。特にアクセスの多いページや更新頻度の高いページで有効です。

function Page({ data }) {
  return (
    <div>
      <h1>最新情報</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Page;

7. ISRとSSR、SSGの違いを簡単に理解する

7. ISRとSSR、SSGの違いを簡単に理解する

Next.jsでは3つの生成方法があります。SSG（Static Generation）はビルド時に固定ページを作る方法、SSR（Server Side Rendering）はアクセス時に毎回ページを作る方法、そしてISRはSSGをベースにしつつ、指定間隔で自動更新する方法です。これにより、最新情報を効率的に配信できます。

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

  return {
    props: { data },
    revalidate: 180, // 3分ごとに再生成
  };
}

まとめ

まとめ

今回の記事では、Next.jsにおけるISR（Incremental Static Regeneration）の基本的な概念から、具体的にどのようなケースでISRが必要になるのかまで詳しく解説しました。ISRは、静的生成（SSG）されたページを効率的に更新できる仕組みであり、ニュースサイト、ブログ、ECサイト、ランキング、天気やイベント情報など、情報が頻繁に変化するウェブサイトに特に有効です。従来のSSR（Server Side Rendering）ではアクセスが集中した場合にサーバー負荷が大きくなりますが、ISRを利用することでキャッシュを活用しつつ、一定間隔で自動更新することが可能になります。これにより、ページの高速表示と最新情報の提供の両立が可能です。

具体的な例として、ニュース記事一覧では60秒ごとに更新、ECサイトの商品一覧では5分ごとに更新、人気ランキングでは2分ごとに更新、天気情報では10分ごとに更新と、更新間隔を状況に応じて設定することができます。このようにISRは、アクセスが多く更新頻度も高いページに最適化されており、SEOの観点からも検索エンジンに最新情報を提供できるというメリットがあります。

また、Next.jsにおける生成方法の比較も重要です。SSG（Static Generation）はビルド時に固定ページを生成するため高速表示が可能ですが、情報が古くなる可能性があります。SSRはアクセス時に毎回ページを生成するため常に最新情報を表示できますが、アクセスが多い場合はサーバー負荷が高くなります。ISRは、SSGをベースにしつつ、指定間隔で自動更新することで、高速表示と最新情報の提供を両立させる理想的な方法です。

実際の実装では、getStaticPropsにrevalidateを設定することで、簡単にISRを導入できます。これにより、ページはキャッシュされつつも、指定時間が経過すると自動的に再生成され、最新データが反映されます。アクセス集中時でも高速表示が維持されるため、ユーザー体験を損なわずに最新情報を提供できます。

さらに、ISRは単に表示速度や最新情報の提供にとどまらず、SEOにも大きく寄与します。検索エンジンはページの内容を評価する際、更新頻度や最新性も判断材料にしています。そのため、ISRで定期的に更新されるページは、検索エンジンにとって価値のあるコンテンツと認識されやすく、検索順位向上にもつながります。

最後に、ISRを使う際のポイントとして、更新間隔の設定があります。更新頻度が高すぎるとサーバー負荷が増え、低すぎると情報が古くなります。アクセス状況やデータ更新頻度に応じて、最適なrevalidateの値を設定することが重要です。これにより、パフォーマンスと最新情報提供のバランスを最適化できます。