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 成功のカギ