ISR（Incremental Static Regeneration）は、SSGの拡張として登場したレンダリング方式で、事前にビルドした静的HTMLをベースに、一定時間ごと、あるいはオンデマンドの指示でページを再生成する仕組みです。2020年7月公開のNext.js 9.5でVercelが導入し、その後Nuxt・SvelteKit・Astroにも類似機能が広がりました。「全部ビルドし直すと時間がかかりすぎる」「でもSSRするほど動的でもない」という中間ニーズを埋め、数万ページ規模のメディアでもSSGの利点を享受できるようにしました。
この記事の目次
- ISRの動作モデル
- ISRが解決した3つの課題
- ISR導入時に押さえるポイント
- SSG・SSRとの位置付け
- まとめ
ISRの動作モデル
ISRはStale-While-Revalidate（古い応答を返しつつ裏で更新）の発想を、ページ単位のHTML生成に適用したものと捉えると理解しやすい仕組みです。リクエストがエッジに届くと、まず既にビルド済みの静的HTMLが即座に返されます。このHTMLには「revalidate: 60」のような有効期限が設定されており、期限を過ぎたリクエストが入った瞬間に再生成のフラグが立ちます。
ユーザーへは古いHTMLが返り終わったあと、裏側でサーバが新しいHTMLを生成し、CDNキャッシュを差し替えます。次の訪問者からは新版が配信され、「常に直近の状態に近い」「でも生成中に待たされない」という良いとこ取りが実現します。Next.jsではrevalidatePathやrevalidateTag APIを使って、CMSで記事を更新した瞬間に該当ページだけ即時再生成することも可能で、公開フローのライブ性が大きく高まりました。
ISRが解決した3つの課題
ISRがWeb開発に与えた最大のインパクトは、SSGの抱えていた「ビルド時間問題」を実質的に解消したことです。数万件のECページや記事を抱えるサイトでは、純粋なSSGだとフルビルドに30分以上かかり、1記事の修正のためにそれだけ待つのは現実的ではありませんでした。ISRなら起動時は最小限のページだけ生成し、残りはリクエストが来た瞬間に生成する遅延ビルドが可能で、初回デプロイが数秒で終わるようになります。
2つ目の利点はコンテンツ鮮度です。SSGは再ビルドしない限り情報が古いままですが、ISRなら「30秒ごと」「商品在庫が変わったタイミング」など細かい更新サイクルを設定でき、メディアや在庫表示でも実用的な鮮度を保てます。3つ目はコスト効率で、SSRが毎リクエストで生成するのに対し、ISRは期限切れの最初の1回だけ生成するので、サーバ計算量が大幅に削減されます。アクセス数の多いトップページほどISRの効率の良さが効いてきます。
ISR導入時に押さえるポイント
ISRを導入する際は、まずrevalidate値の設計から始めます。ニュース記事なら60秒、商品ページなら300秒、Aboutページなら3600秒など、コンテンツの性質ごとに更新間隔を切り分けます。短すぎるとサーバ負荷が増え、長すぎるとユーザーに古い情報を見せる時間が伸びます。メディアサイトではトップだけ短くし、個別記事は長めに取るのが定番です。
次にオンデマンド再生成です。CMS側から「記事を公開した」というWebhookを飛ばし、revalidatePath APIで該当ページだけ即時再生成する設計が現代的なベストプラクティスです。また、編集者がプレビューで未公開記事を見たい場合のドラフトモード、CDNキャッシュをパージする手順、再生成中に上流APIが落ちた場合のフォールバック（古いHTMLをそのまま延長配信するなど）も準備しておく必要があります。公開フローと組み合わせた運用設計が、ISRの強みを最大化する鍵になります。
SSG・SSRとの位置付け
ISRはSSGとSSRのちょうど中間に位置するハイブリッド方式です。SSGは「ビルド時に全部作る、その後は固定」、SSRは「毎回作る」、ISRは「最初に作って、必要に応じて作り直す」と整理できます。鮮度・コスト・規模耐性のいずれも中庸を取れるため、現代の中規模以上のWebサイトのデフォルト選択肢になりつつあります。ブログ、メディア、ECなどで「SSGでは更新が間に合わない、SSRでは負荷が重い」という現場の悩みを直接解決します。
Next.jsの場合、App Router移行後はISRが「dynamic = 'force-static' + revalidate」「revalidatePath/revalidateTag」として再整理され、Server Componentsと組み合わせてさらに柔軟に使えるようになりました。Nuxt 3もroute rulesでisr: trueを指定可能で、SvelteKitやAstroにも類似機能があります。「迷ったらまずISR、リアルタイム性が必要な部分だけSSR、完全に静的な部分はSSG」という順序で考えると、コストとパフォーマンスのバランスを取りやすい構成になります。
まとめ
ISRはNext.js 9.5（2020年7月）で広く知られるようになった「静的＋必要時に再生成」のハイブリッド方式です。SSGのビルド時間問題と鮮度の限界を解消し、SSRより低コストでコンテンツを最新に保てるため、現代の中規模以上のサイトでデフォルトの選択肢になりつつあります。revalidate値とオンデマンド再生成の組み合わせで、運用フローに合わせた更新サイクルを設計するのが肝心です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント