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

Page is pre-rendered at build time
You define a revalidate time (e.g., 60 seconds)
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)

Comments (0)