How ISR Works

Basic ISR Mechanism

ISR uses the "revalidate" option to set cache validity duration. After this time expires, the page is regenerated in the background on the next access.

Revalidate Settings

In Next.js App Router, revalidate is configured in the page component.

// With revalidate = 60
// Cache is returned for 60 seconds, then regenerated on next access after 60 seconds
export const revalidate = 60;

Set appropriate intervals based on page characteristics.

• Product detail pages: Set shorter intervals considering inventory/price updates
• Collection (list) pages: Set based on new product addition frequency
• Homepage: Longer intervals possible due to lower update frequency

On-Demand ISR

With regular ISR, stale cache is displayed until the set time expires. To reflect product information immediately, use On-Demand ISR.

On-Demand ISR is a mechanism to invalidate cache via external requests. Create a cache invalidation endpoint in Next.js API Route and call it via Webhook.

Webhook Integration

For EC sites, receive Webhooks when product information is updated to invalidate the relevant page's cache.

Process Flow

1. Update product information in admin panel
2. Update event is sent to Next.js via Webhook
3. API Route receives Webhook and invalidates the relevant page's cache
4. Page is regenerated with latest data on next user access

This mechanism allows fast cache delivery normally, with immediate updates only when needed.

Architecture

Summary

ISR combines automatic updates via revalidate with immediate updates via On-Demand ISR. By configuring appropriate settings based on page characteristics, you can achieve both fast display and fresh data.