Shopify Storefront API with Next.js Incremental Static Regeneration (ISR)

You use Next.js's `revalidatePath` or `revalidateTag` functions inside an API route or route handler that receives Shopify webhooks. When a product update or inventory change webhook fires, your handler calls these functions to regenerate only the affected pages rather than rebuilding the entire site.

On-demand ISR via `revalidatePath` and `revalidateTag` was introduced in Next.js 12.2 and stabilized further in Next.js 13 and 14. If you are building a Shopify storefront with the App Router, Next.js 13.1 or later is recommended for the most reliable on-demand revalidation behavior.

ISR serves pre-rendered HTML from cache instantly and regenerates pages in the background, which is dramatically faster and less server-intensive than server-side rendering every request. For a Shopify catalog with thousands of products, ISR reduces both time-to-first-byte and server compute costs while keeping inventory and pricing data reasonably fresh.

Yes, in the App Router you can set a `revalidate` value (in seconds) in your route segment config or as a `next.revalidate` option on individual `fetch` calls to the Storefront API. You can also combine time-based revalidation with webhook-triggered on-demand revalidation for a hybrid approach that balances freshness and performance.