What is Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) is a feature of Next.js that allows you to update static pages after they have been built — without rebuilding the entire site.

It combines the best parts of:

• 🏗 Static Site Generation (SSG) – Fast, pre-built pages

• 🌐 Server-Side Rendering (SSR) – Fresh, dynamic data

🧠 Why ISR Was Needed?

Normally:

MethodProblemSSGContent becomes outdated unless you rebuildSSRSlower because page is generated on every request

ISR solves this by:

Regenerating pages in the background after a specified time.

⚙️ How ISR Works

1. Page is pre-rendered at build time

2. You define a revalidate time (e.g., 60 seconds)

3. After that time:

• First user still gets the old cached page

• In the background, Next.js regenerates the page

• Next users get the updated version

🧩 Simple Example (Next.js)

export async function getStaticProps() {
  const data = await fetchSomeAPI()

  return {
    props: { data },
    revalidate: 60, // regenerate page every 60 seconds
  }
}

This means:

• Page is static

• But will update every 60 seconds automatically

🔥 Real-Life Example

Imagine you are building:

• 🛒 E-commerce product pages

• 📰 Blog posts

• 📊 Dashboard landing pages

You don’t want:

• To rebuild your entire site every time a product price changes

• Nor to render everything on each request

ISR gives you:

⚡ Static speed + 🔄 Fresh data

🎯 When Should You Use ISR?

Use ISR when:

✅ Content updates occasionally

✅ SEO is important

✅ You want CDN caching

✅ You don’t need real-time updates

Avoid ISR when:

❌ You need real-time data (e.g., stock trading dashboard)