Incremental Static Regeneration Quickstart

Start using Incremental Static Regeneration (ISR) with Vercel.
Table of Contents

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 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
});

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 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:

  1. Create an Environment Variable which will store a revalidation secret
  2. 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,
    },
  );
}

See the background revalidation section above for a full ISR example.

Last updated on July 22, 2024