Incremental Static Regeneration

• Static pages (SSG) can be auto updated after site is built, without rebuilding the entire site.

ISR Workflow

1. In project, use getStaticProps with the revalidate option.

// This function runs at build time and regenerates pages
export async function getStaticProps() {
  // Fetch data from an API
  const res = await fetch('<https://jsonplaceholder.typicode.com/posts?_limit=5>');
  const posts = await res.json();

  return {
    props: { posts },    // Passed to the page component
    revalidate: 30,      // Regenerate page every 30 seconds
  };
}

// pages/posts/[id].js
export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

1. At build time, the framework generates static HTML pages just like SSG.
   1. Example: /blog/post1.html and /blog/post2.html.
2. Pages are uploaded to the CDN (Content Delivery Network).
3. Users visiting the page get the pre-rendered HTML instantly.
4. Pages can be regenerated in the background based on:
   1. A time interval (e.g., revalidate every 60 seconds).
   2. On-demand triggers (like a CMS webhook).
5. While regeneration happens, users still get the old static page, so there’s no downtime.
6. Once the page is regenerated, the new HTML replaces the old page on the CDN.
7. Future visitors see the latest version without rebuilding the whole site.

Advantages of ISR

1. Fast initial load ✅
   • Like SSG, HTML is served instantly from the CDN.
2. SEO-friendly ✅
   • Pages are static and fully rendered for search engines.
3. Dynamic content support ✅
   • Pages can update automatically without rebuilding the entire site.
4. Minimal server load ✅
   • Only updated pages are regenerated, not the whole site.