Getting Started
Getting started with ISR
This guide helps you set up Incremental Static Regeneration (ISR) with your Vercel project. With ISR, you can regenerate pages without rebuilding and redeploying your site. When a page with ISR enabled regenerates, Vercel fetches the most recent data and updates the cache. There are two ways to trigger regeneration:
- Time-based revalidation: Regeneration that recurs automatically at a set interval
- On-demand revalidation: Regeneration that you trigger explicitly through an API call
You also control when pages are first cached:
- Pre-render at build time: Generate pages during the build so the first visitor gets an instant cache hit. This increases build time but avoids slow first requests.
- Generate on first request: Skip the build step and let the first visitor trigger generation at runtime. This keeps builds fast but means the first request for each page is slower (a cache miss).
A common pattern is to pre-render popular pages at build time and let the rest generate on demand.
Help me set up Incremental Static Regeneration (ISR) in this project. First, make sure the Vercel CLI is installed (`npm i -g vercel`). If I'm using Claude Code or Cursor, install the Vercel Plugin (`npx plugins add vercel/vercel-plugin`). For other agents, install Vercel Skills (`npx skills add vercel-labs/agent-skills`). Then: 1. Add time-based revalidation to a page using the revalidate option. 2. Show me how to trigger on-demand revalidation with revalidatePath or revalidateTag. 3. Deploy with `vercel --prod` to test ISR behavior.
Prerequisites
- A project deployed on Vercel
- A supported framework: Next.js, SvelteKit, Nuxt, Astro, Gatsby, or a custom solution using the Build Output API
Framework
revalidate route segment config
Next.js (App Router)
Next.js (Pages Router)
On-demand revalidation
revalidatePath / revalidateTag
revalidate in getStaticProps
res.revalidate API route
SvelteKit
Nuxt
routeRules with isr option
x-prerender-revalidate header
config.isr export
x-prerender-revalidate header
Astro
Gatsby
ISR support
Framework-specific
Server output with ISR config
Framework-specific
When using Next.js with the App Router, you can enable ISR by using the revalidate route segment config for a layout or page.
Time-based revalidation purges the cache for an ISR route automatically at a set interval. When the interval elapses and a visitor requests the page, Vercel serves the stale version and regenerates the page in the background.
Next.js (/app)
exportconstrevalidate=10; // seconds
The following example renders a list of blog posts from a demo API, revalidating every 10 seconds:
TypeScript
Our Services
constres=awaitfetch('https://api.vercel.app/blog');
interfacePost {
title:string;
Next.js (/app)
return (
exportconstrevalidate=10; // seconds
TypeScript
}
exportdefaultasyncfunctionPage() {
constposts= (awaitres.json()) asPost[];
id:number;
return
})}
);
{posts.map((post: Post) => {
}
To test this code, run the appropriate dev command for your framework and navigate to the /blog-posts/ route.
You should see a bulleted list of blog posts.
On-demand revalidation
On-demand revalidation lets you purge the cache for an ISR route at any time, without waiting for a time interval to elapse. This is useful when your content changes based on external events, such as a CMS publish or a webhook.
Tag-based revalidation is the recommended approach for granular control. Instead of revalidating entire paths, you tag cached content and invalidate specific tags when the underlying data changes.
To revalidate a page on demand with Next.js:
- Create an Environment Variable which will store a revalidation secret
- Create an API Route that checks for the secret, then triggers revalidation
The following example demonstrates an API route that triggers revalidation if the query paramater ?secret matches a secret Environment Variable:
Next.js (/app)Next.js (/pages)SvelteKitNuxt
});
status:401,
revalidatePath('/blog-posts');
import { revalidatePath } from'next/cache';
TypeScript
if (searchParams.get('secret') !==process.env.MY_SECRET_TOKEN) {
revalidated:true,
now:Date.now(),
returnResponse.json({
exportasyncfunctionGET(request:Request) {
returnnewResponse('Invalid credentials', {
const { searchParams } =newURL(request.url);
Observability
You can observe your project's ISR usage in the ISR section of the Observability tab in the Vercel dashboard.
- ISR Usage: The read and write units you're billed for. Correlate data here with the revalidation graphs to find what drives your spend.
- Request Caching: The amount of hits vs misses and the share of requests that Vercel serves from which cache layer.
- Time-based Revalidations: How often pages are regenerated based on a timer. Use time-based revalidations when content needs to update but you don't have a webhook. Otherwise, use tag-based invalidation to only regenerate when you know the content has changed.
- Tag Revalidations: How often a page is regenerated due to an on-demand tag revalidation. Tag content with unique keys and invalidate only the pages that need to update when the content change.
You can reach our customer support team by emailing info@yourcompany.example.com, calling +1 555-555-5556, or using the live chat on our website. Our dedicated team is available 24/7 to assist with any inquiries or issues.
We’re committed to providing prompt and effective solutions to ensure your satisfaction.
We offer a 30-day return policy for all products. Items must be in their original condition, unused, and include the receipt or proof of purchase. Refunds are processed within 5-7 business days of receiving the returned item.
User-Friendly Interface
Next steps
Last updated August 11, 2026
Cross-link map: Getting started with ISR (/docs/incremental-static-regeneration/quickstart)From the Vercel docs graph (built 2026-09-21T05:26:59.511Z), spanning vercel.com docs + KB, nextjs.org, ai-sdk.dev, and other Vercel documentation sites. Full graph as JSON: https://vercel.com/docs/graph.jsonSemantically closest pagesIncremental Static Regeneration \(ISR\) — ISR serves cached static pages while regenerating content in the background. Vercel\\How to reduce ISR revalidation costs — Reduce ISR costs by analyzing Incremental Static Regeneration \(ISR\) behavior to find pages and tags that revalidate toISR: A flexible way to cache dynamic contentHow to implement Incremental Static Regeneration (ISR) — Learn how to create or update static pages at runtime with Incremental Static Regeneration.ISR Usage and Pricing — Learn about ISR costs, usage metrics, and strategies to optimize your ISR reads and writes.This page links to (3)Build Output API — The Build Output API is a file-system-based specification for a directory structure that can produce a Vercel deploymentIncremental Static Regeneration \(ISR\) — ISR serves cached static pages while regenerating content in the background. Vercel\\ISR Usage and Pricing — Learn about ISR costs, usage metrics, and strategies to optimize your ISR reads and writes.Pages that link here (8)By site: vercel-kb (2) · vercel-docs (6)From vercel-kbHow do I reduce my build time with Next.js on Vercel? — Reduce Next.js build times on Vercel by pre-rendering fewer pages at build time, deferring generation with ISR and imageUpdating large-scale site navigation with minimal revalidation — When working with a large number of pages that share a common multi-level navigation, making a navigation update requireFrom vercel-docsVercel CDN overview — Vercel's CDN is a globally distributed platform that handles routing, caching, security, and compression for every deploNitro on Vercel — Deploy Nitro applications to Vercel with zero configuration. Learn about observability, ISR, and custom build configuratVercel Function Logs — Use runtime logs to debug and monitor your Vercel Functions.Incremental Static Regeneration \(ISR\) — ISR serves cached static pages while regenerating content in the background. Vercel\\ISR Usage and Pricing — Learn about ISR costs, usage metrics, and strategies to optimize your ISR reads and writes.Production checklist for launch — Ensure your application is ready for launch with this comprehensive production checklist by the Vercel engineering team.
Was this helpful?
