Incremental Static Regeneration Quickstart

Start using Incremental Static Regeneration (ISR) with Vercel.

Table of Contents

Next.js (/app)

You can use Incremental Static Regeneration (ISR) to regenerate your pages without rebuilding and redeploying your site. When a page with ISR enabled is regenerated, the most recent data for that page is fetched, and its cache is updated. There are two ways to trigger regeneration:

Background revalidation – Regeneration that recurs on an interval
On-demand revalidation – Regeneration that occurs when you send certain API requests to your app

This quickstart will teach you to do both techniques. To get started, select a framework:

Background Revalidation

Background revalidation allows you to purge the cache for an ISR route automatically on an interval.

When using Next.js with the app router, you can enable ISR by adding an options object with a revalidate property to your fetch requests:

Next.js (/app)

Next.js (/pages)

SvelteKit

Nuxt

apps/example/page.tsx

await fetch('https://api.vercel.app/blog', {
  next: { revalidate: 10 }, // Seconds
});

Example

The following example renders a list of blog posts from a demo site called jsonplaceholder, revalidating every 10 seconds or whenever a person visits the page:

Next.js (/app)

Next.js (/pages)

SvelteKit

Nuxt

app/blog-posts/page.tsx

interface Post {
  title: string;
  id: number;
}
 
export default async function Page() {
  const res = await fetch('https://api.vercel.app/blog', {
    next: { revalidate: 10 },
  });
  const posts = (await res.json()) as Post[];
  return (
    <ul>
      {posts.map((post: Post) => {
        return <li key={post.id}>{post.title}</li>;
      })}
    </ul>
  );
}

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 allows you to purge the cache for an ISR route whenever you want, foregoing the time interval required with background revalidation.

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)

SvelteKit

Nuxt

app/api/revalidate/route.ts

import { revalidatePath } from 'next/cache';
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  if (searchParams?.secret !== process.env.MY_SECRET_TOKEN) {
    return new Response(`Invalid credentials`, {
      status: 500,
    });
  }
  revalidatePath('/blog-posts');
  return new Response(
    {
      revalidated: true,
      now: Date.now(),
    },
    {
      status: 200,
    },
  );
}