ISRの仕組み

ISRの基本的な仕組み

ISRは「revalidate」というオプションでキャッシュの有効期間を設定します。この時間が経過すると、次のアクセス時にバックグラウンドでページが再生成されます。

revalidateの設定

Next.js App Routerでは、ページコンポーネントでrevalidateを設定します。

// revalidate = 60 の場合
// 60秒間はキャッシュを返し、60秒経過後の次のアクセスで再生成
export const revalidate = 60;

ページの性質に応じて、適切な間隔を設定します。

• 商品詳細ページ: 在庫・価格の反映を考慮して短めに設定
• コレクション（一覧）ページ: 新商品の追加頻度に応じて設定
• トップページ: 更新頻度が低いため、長めに設定可能

オンデマンドISR

通常のISRは、設定した時間が経過するまで古いキャッシュが表示されます。商品情報をすぐに反映したい場合は、オンデマンドISR（On-Demand ISR）を使用します。

オンデマンドISRは、外部からのリクエストでキャッシュを無効化する仕組みです。Next.jsのAPI Routeでキャッシュ無効化のエンドポイントを作成し、Webhookで呼び出します。

Webhookとの連携

ECサイトでは、商品情報の更新時にWebhookを受け取り、該当ページのキャッシュを無効化します。

処理の流れ

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

この仕組みにより、通常はキャッシュから高速配信しつつ、必要な時だけ即座に更新できます。

構成図

まとめ

ISRは、revalidateによる自動更新と、オンデマンドISRによる即時更新を組み合わせて使用します。ページの特性に応じて適切な設定を行うことで、高速表示とデータの鮮度を両立できます。