Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR)

Incremental Static Regeneration is a powerful feature that combines the best of static and dynamic rendering. It lets you update static pages after build time without rebuilding your entire site.

Think of ISR like a newspaper that updates automatically. The initial edition is printed at a specific time, but new editions are printed periodically with fresh content. You get the reliability of static content with the freshness of dynamic updates.

How ISR Works

ISR works by regenerating pages in the background after a specified time interval. Here's the process:

When a user requests a page, they initially receive the static version. Meanwhile, Next.js checks if the page needs regeneration based on the revalidation time you set.

If regeneration is needed, Next.js serves the old version while generating a new one in the background. Once the new version is ready, it replaces the old one for future requests.

This means users always get fast static content, but the content stays fresh without manual rebuilds.

Implementing ISR

To use ISR, you add the revalidate option to your getStaticProps function. This specifies how often (in seconds) the page should be regenerated.

// app/blog/[slug]/page.js
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);
  
  return {
    props: {
      post,
    },
    revalidate: 3600, // Regenerate every hour
  };
}

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const paths = posts.map(post => ({
    params: { slug: post.slug },
  }));
  
  return {
    paths,
    fallback: 'blocking',
  };
}

export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

The fallback: 'blocking' option tells Next.js to server-render new pages on first request and then cache them.

When to Use ISR

ISR is perfect for content that updates periodically but doesn't need real-time freshness. News articles, product catalogs, and blog posts are great candidates.

It's also useful when you have many pages and rebuilding the entire site takes too long. With ISR, only the pages that need updating are regenerated.

However, ISR isn't suitable for truly dynamic content like user-specific dashboards or real-time data. For those, use server-side rendering or client-side fetching.

ISR vs SSG vs SSR

Understanding when to use each rendering strategy is crucial:

SSG: Content never changes after build time. Perfect for documentation or portfolios.

ISR: Content updates periodically. Ideal for blogs, news sites, and product catalogs.

SSR: Content changes on every request. Best for personalized dashboards and real-time data.

Next.js lets you mix these strategies within the same application, choosing the best approach for each page.