ISR（Incremental Static Regeneration）

ISR は、「静的生成（SSG）」と「動的生成（SSR）」のいいとこ取りをした仕組みです。

簡単に言うと、

基本は静的ページとして高速に配信しつつ、
一定時間ごとに裏側でページを再生成して最新状態に保つ

という仕組みです。

なぜ ISR が必要なのか？

SSG（Static Site Generation）の課題

SSG は、

ビルド時に HTML を生成
CDN から高速配信できる

という強力なメリットがありますが、

データが更新されてもページに反映されない
更新のたびに 再ビルド & 再デプロイが必要

という問題があります。

SSR（Server Side Rendering）の課題

SSR は、

常に最新データを表示できる

一方で、

リクエストごとにサーバーで処理が走る
レスポンスが遅くなりがち
サーバー負荷が高い

というデメリットがあります。

ISR は何を解決するのか？

ISR はこの 2 つの問題を解決します。

初回は 静的ページとして高速配信
指定した時間が経過したら
次のアクセス時に裏側で再生成
再生成が終わると、新しいページに自動で差し替え

つまり、

ユーザー体験は SSG 並みに速い
データ更新も ある程度リアルタイムに反映できる

という状態を作れます。

ISR の基本イメージ

ビルド時に静的 HTML を生成
ユーザーは CDN から即表示
revalidate で指定した時間を超える
次のリクエスト時にバックグラウンドで再生成
次回以降のユーザーは新しいページを見る

※ 再生成中でもユーザーは古いページを見続けられる のがポイント

実際の書き方

App Router（Next.js 13+）での ISR

App Router では fetch に revalidate を指定します。

const data = await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 },
}).then((res) => res.json());

特徴

ページ単位ではなく データ単位で再検証
より細かいキャッシュ制御が可能

ISR を使うメリット

高速な表示（SSG 並み）

CDN 配信されるため初期表示が非常に速い
LCP 改善に効果的

常にそこそこ新しいデータ

完全リアルタイムでなくても問題ないケースに最適
数分〜数時間遅れても OK なページ向き

ビルド時間の短縮

全ページを毎回ビルドし直す必要がない
ページ数が多いサイトほど効果大

ISR のデメリット・注意点

リアルタイム性はない

revalidate の間は古い情報が表示される
金融情報・在庫数・即時反映が必要なデータには不向き

「次のアクセス」がトリガーになる

アクセスがないページは再生成されない
更新頻度が低いページは古いままになる可能性あり

再生成中の挙動を理解しておく必要がある

再生成中もユーザーは古いページを見る
「一瞬だけ古い情報が表示される」ことは仕様

ISR が向いているページ

ブログ記事
ニュース一覧
商品一覧（価格が頻繁に変わらないもの）
CMS 管理のコンテンツ
マーケ・コーポレートサイト

ISR が向いていないページ

ログイン後のマイページ
ユーザーごとに内容が変わるページ
リアルタイム性が重要な情報（在庫・株価など）

まとめ

ISR は SSG の高速性 と SSR の柔軟性 を両立する仕組み
完全リアルタイムでなくていいページに最適
ページ数が多いサイトほど効果が大きい
revalidate の設計が ISR 成功のカギ