Incremental Static Regeneration Quickstart
Start using Incremental Static Regeneration (ISR) with Vercel.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:
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:
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:
- 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:
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.
![On-Demand ISR](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5TY3yVmUYix5mHgfUjhSD0%2Fe505b67dc1ff11c76e1cff9f680ad74f%2FCleanShot_2022-04-13_at_17.12.05_2x.png&w=1200&q=75)
On-Demand ISR
Instantly update content without redeploying.
![ISR Blog with Next.js and WordPress](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2QHjwNHn9NzlflFlEqcwJv%2F1f7b5363a4a4591c4a85d106c868da71%2FCleanShot_2022-08-08_at_15.58.48.png&w=1200&q=75)
ISR Blog with Next.js and WordPress
An Incremental Static Regeneration Blog Example Using Next.js and WordPress
![SvelteKit Route Config](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2K2rLNPlEyw84WRZPb1ibk%2F309717064d1c0c915a10eedacd350c85%2FScreen_Shot_2023-03-23_at_10.29.30_PM.png&w=1200&q=75)
SvelteKit Route Config
This template shows how to configure Edge Functions, Serverless Functions, and ISR in SvelteKit applications on a per-route basis.
Was this helpful?