ISRとは?

静的生成と動的更新を組み合わせた、Next.jsの仕組み

ISR静的生成キャッシュ入門
読了時間: 2分

ISRとは

ISR(Incremental Static Regeneration)は、Next.jsが提供する機能です。日本語では「増分静的再生成」と訳されますが、簡単に言えば「静的ページを作っておき、必要に応じて自動で更新する仕組み」です。

従来の方式との違い

Webページの生成方式には、いくつかの種類があります。

SSG(Static Site Generation)

ビルド時にすべてのページを静的HTMLとして生成します。表示は非常に高速ですが、コンテンツを更新するたびに再ビルドが必要です。商品数が多いECサイトでは、ビルド時間が長くなる課題があります。

SSR(Server Side Rendering)

ユーザーがアクセスするたびに、サーバーでHTMLを生成します。常に最新のデータを表示できますが、毎回サーバー処理が発生するため、表示までに待ち時間が生じます。

ISR

SSGとSSRの良いところを組み合わせた方式です。ビルド時に静的ページを生成し、設定した間隔(revalidate)で自動的に更新します。ユーザーには高速にキャッシュを返しつつ、バックグラウンドで最新データに更新できます。

ISRが適している場面

ISRは以下のようなケースで効果を発揮します。

  • ECサイトの商品ページ: 在庫や価格は更新されるが、秒単位の即時性は不要
  • ブログやニュース: 新着記事は随時追加されるが、公開後の変更は少ない
  • 企業サイト: 情報は定期的に更新されるが、リアルタイム性は不要

逆に、チャットやリアルタイムの株価表示など、常に最新データが必要な場面には向いていません。

まとめ

ISRは「高速表示」と「データの鮮度」を両立させる仕組みです。ECサイトのように、ある程度の更新頻度があるコンテンツを、高速に配信したい場合に適しています。

関連記事