What is ISR in Next.js?

Next.jsMiddle~1 min read

ISR (Incremental Static Regeneration) in Next.js is a hybrid of SSG + background update, where a page stays static and fast, but is periodically rebuilt without a full rebuild of the site.

How ISR works

On next build the page is generated once (like SSG)
Users get static HTML
revalidate seconds pass
Next request:

the old HTML is served right away
the new one is rebuilt in the background

Subsequent users will see the updated version

build → static HTML → users
                 ↓ (revalidate)
              background rebuild

A user never waits for the rebuild.

How to enable ISR (App Router)

Via `revalidate`

// app/blog/page.tsx
export const revalidate = 60; // seconds

export default async function Page() {
  const posts = await getPosts();
  return <Posts posts={posts} />;
}

Via `fetch`

await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 },
});

When to use ISR

ISR is a great fit when:

the content is public
the data gets updated
SEO is needed
speed matters

Typical cases:

a blog
a product catalog
roadmaps
articles
marketing pages with updates

Pros of ISR

almost as fast as SSG
data updates automatically
no load like with SSR
no full rebuild needed
great for a CDN

Cons of ISR

data is not always "right now"
a stale version is possible until revalidate
not suited for personalization
cannot be used for auth data

ISR vs SSG vs SSR

	SSG	ISR	SSR
Speed	high	high	medium
Freshness	no	partial	yes
Server	no	partial	yes
SEO	yes	yes	yes

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.