What is ISR in Next.js: Incremental Static Regeneration Explained

ISR in Next.js stands for Incremental Static Regeneration. It lets you update static pages after build time without rebuilding the whole site, combining fast static pages with fresh content.

How It Works

Imagine you have a website with pages that don't change often, like a blog. Normally, Next.js can create these pages once when you build the site, making them very fast to load. But what if you want to update some pages with new content without rebuilding everything? That's where ISR helps.

ISR lets Next.js regenerate specific pages in the background after the site is live. When a user visits a page, Next.js serves the static version immediately. Then, if the page is older than a set time, Next.js updates it quietly in the background. The next visitor gets the fresh page without waiting.

This works like a bakery that bakes bread early but refreshes some loaves during the day so customers always get fresh bread quickly without waiting for a new batch every time.

Example

This example shows how to use ISR in Next.js by setting a revalidate time in getStaticProps. The page will update at most every 10 seconds.

javascript

export async function getStaticProps() {
  // Simulate fetching data
  const data = { message: 'Hello from ISR!', time: new Date().toISOString() };

  return {
    props: { data },
    revalidate: 10 // seconds
  };
}

export default function ISRPage({ data }) {
  return (
    <main>
      <h1>{data.message}</h1>
      <p>Last updated at: {data.time}</p>
    </main>
  );
}

Output

<h1>Hello from ISR!</h1>
<p>Last updated at: 2024-06-01T12:00:00.000Z</p>

When to Use

Use ISR when you want the speed of static pages but need to update content regularly without rebuilding the whole site. It fits well for blogs, product pages, or marketing sites where content changes but not every second.

For example, a news site can show fast-loading articles but refresh them every few minutes to keep news fresh. Or an e-commerce site can update product details or prices without downtime.

Key Points

• ISR updates static pages after build without full rebuilds.
• Set revalidate in getStaticProps to control update frequency.
• Users get fast pages and fresh content seamlessly.
• Great for sites with mostly static but occasionally changing content.

Key Takeaways

ISR lets Next.js update static pages in the background after deployment.

Use the revalidate option in getStaticProps to set how often pages refresh.

ISR combines fast static loading with up-to-date content.

Ideal for blogs, marketing sites, and e-commerce with changing data.