ISRの仕組み

revalidate設定とオンデマンドISRによるキャッシュ制御

ISRrevalidateOn-Demand ISRWebhook
読了時間: 8分

はじめに

ISRを導入するとき、最初に迷うのが「キャッシュ(作り置きしたページ)をいつ作り直すか」という設定です。間隔が短すぎると作り直しが増えて速さのメリットが薄れ、長すぎると古い情報が表示され続ける。ちょうどいい塩梅を、どう決めればいいのか。

この記事では、その調整を担うrevalidateという設定の考え方と、更新を待たずに反映するオンデマンドISR、そして商品更新が自動でサイトに伝わるWebhook連携までの流れを解説します。

revalidateでキャッシュの寿命を決める

「この作り置きは60秒有効」と指定するだけ

revalidateは、ページごとに「作り置きの有効期間」を秒数で指定する設定です。たとえば60秒に設定すると、60秒間は作り置きをそのまま返し、期限が切れたあとの最初のアクセスをきっかけに、裏側で新しいページが作り直されます。

仕組みは高度に聞こえますが、実装として指定するのはページごとに数字1つ。AIエージェント(AIによる開発支援)に「商品ページは60秒ごとに更新されるようにして」と伝えて設定してもらう、という進め方でも十分に成立します。

ページの性質に合わせた間隔の考え方

すべてのページを同じ間隔にする必要はありません。むしろ、ページごとに更新の必要度が違うので、性質に合わせて寿命を変えるのが基本です。

  • 商品詳細ページ: 在庫や価格の反映を優先して、短めに設定
  • コレクション(一覧)ページ: 新商品が追加される頻度に合わせて、中くらいに設定
  • トップページ: 更新頻度が低ければ、長めでも問題なし

「よく変わるページほど短く、あまり変わらないページは長く」。判断基準はこれだけです。

迷ったら長めに始めて、必要な分だけ短くする

最初から完璧な数字を決める必要はありません。運用してみて「反映が遅い」と感じたページだけ間隔を短くしていく、という調整のほうが現実的です。間隔を短くするほどページの作り直しとAPIへの問い合わせが増えるので、短くする理由が特にないページは長いままにしておくのが安全側の選択。revalidateはあとからいつでも変えられる設定なので、まず動かして、様子を見て直す。この順番で十分です。

オンデマンドISR — 期限を待たずに更新する

通常のISRだけで運用すると起きること

revalidateだけの運用では、期限が切れるまで古い情報が表示され続けます。たとえば価格の入力ミスに気づいて管理画面ですぐ直しても、キャッシュの期限が来るまでは間違った価格が出たまま。日常の更新なら自動更新で十分ですが、「今すぐ直したい」場面ではこれでは困ります。

外からの合図でキャッシュを無効化する

そこで使うのがオンデマンドISR(On-Demand ISR)です。「このページの作り置きはもう古いので捨ててください」という合図を外部から送り、キャッシュを無効化する仕組み。合図を受け取る窓口(API Route。外部からの連絡を受け付ける受付口)をNext.js側に用意しておき、必要なときに呼び出します。合図を受けたページは、次のアクセスのタイミングで最新の内容に作り直されます。

Webhook連携で商品更新を自動反映する

管理画面の更新がサイトに伝わる流れ

オンデマンドISRの合図を人が手動で送るのは現実的ではないので、Webhook(何かが起きたときに自動で通知を送る仕組み)と組み合わせて自動化します。流れは次の通りです。

  1. 管理画面で商品情報を更新する
  2. 更新イベントがWebhookでNext.jsに通知される
  3. 通知を受けた窓口(API Route)が、該当ページのキャッシュを無効化する
  4. 次のユーザーアクセス時に、最新データでページが作り直される

担当者がやることは、いつも通り管理画面を更新するだけ。あとの反映はすべて自動です。

運用がどうラクになったか

この連携ができてからは、「更新したのにサイトに反映されない」という確認ややきもきがなくなりました。反映のためにエンジニアへ依頼したり、サイト全体を作り直したりする作業も発生しません。普段はキャッシュから高速に配信しつつ、変更があったときだけ即座に反映される。運用の手間と表示速度を、どちらも犠牲にしない形に落ち着きました。

構成図

通常のISR(キャッシュ有効期間内)
ユーザーアクセス
リクエスト
CDN
キャッシュを返す
高速表示
即座に表示

有効期間内は、作り置きしたページを返すだけなので最速です。

通常のISR(キャッシュ期限切れ後)
ユーザーアクセス
リクエスト
CDN
古いキャッシュを返す
バックグラウンドで再生成
非同期更新
次回から新しいキャッシュ
更新完了

期限が切れていても、まず手元の作り置きを返してから裏で作り直すため、ユーザーを待たせません。

オンデマンドISR
商品更新
管理画面で更新
Webhook
Next.jsに通知
API Route
キャッシュ無効化
次のアクセスで再生成
最新データで表示

商品更新の通知をきっかけに古い作り置きを捨て、次のアクセスで最新版に置き換わる流れです。

まとめ

ISRの運用は、「revalidateで自動更新の間隔を決めておき、急ぎの反映はWebhook経由のオンデマンドISRで行う」という組み合わせが基本形です。ページの性質に合わせて寿命を決め、即時性が必要な更新だけ合図で反映する。この2段構えで、高速表示とデータの鮮度を無理なく両立できます。