はじめに
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(何かが起きたときに自動で通知を送る仕組み)と組み合わせて自動化します。流れは次の通りです。
- 管理画面で商品情報を更新する
- 更新イベントがWebhookでNext.jsに通知される
- 通知を受けた窓口(API Route)が、該当ページのキャッシュを無効化する
- 次のユーザーアクセス時に、最新データでページが作り直される
担当者がやることは、いつも通り管理画面を更新するだけ。あとの反映はすべて自動です。
運用がどうラクになったか
この連携ができてからは、「更新したのにサイトに反映されない」という確認ややきもきがなくなりました。反映のためにエンジニアへ依頼したり、サイト全体を作り直したりする作業も発生しません。普段はキャッシュから高速に配信しつつ、変更があったときだけ即座に反映される。運用の手間と表示速度を、どちらも犠牲にしない形に落ち着きました。
構成図
有効期間内は、作り置きしたページを返すだけなので最速です。
期限が切れていても、まず手元の作り置きを返してから裏で作り直すため、ユーザーを待たせません。
商品更新の通知をきっかけに古い作り置きを捨て、次のアクセスで最新版に置き換わる流れです。
まとめ
ISRの運用は、「revalidateで自動更新の間隔を決めておき、急ぎの反映はWebhook経由のオンデマンドISRで行う」という組み合わせが基本形です。ページの性質に合わせて寿命を決め、即時性が必要な更新だけ合図で反映する。この2段構えで、高速表示とデータの鮮度を無理なく両立できます。