ISR (Incremental Static Regeneration) in NextJS - Performance & Optimization

Performance: ISR (Incremental Static Regeneration)

MEDIUM IMPACT

ISR affects page load speed by serving static pages quickly while updating content in the background without blocking user requests.

Serving frequently updated content with fast page loads

NextJS

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data }, revalidate: 60 };
}

// Page served statically and regenerated in background every 60 seconds

Serves cached static page instantly and updates content in background without blocking users.

📈 Performance GainLCP improved by 300-400ms, reduces server load, non-blocking regeneration

Serving frequently updated content with fast page loads

NextJS

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

// Page renders on every request, blocking user until data loads

Blocks page rendering on every request causing slower load times and higher server load.

📉 Performance CostBlocks rendering for 200-500ms per request depending on API speed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-side rendering on every request	High (new DOM each request)	Multiple reflows per request	High paint cost due to delay	[X] Bad
ISR with revalidate option	Low (cached DOM reused)	Single reflow on initial load	Low paint cost, fast LCP	[OK] Good

Rendering Pipeline

ISR serves a pre-built static HTML page immediately (fast Style Calculation, Layout, Paint). Meanwhile, regeneration happens asynchronously on the server, so user requests are not delayed.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckServer regeneration can be slow but happens off the critical path

Core Web Vital Affected

LCP

ISR affects page load speed by serving static pages quickly while updating content in the background without blocking user requests.

Optimization Tips

1Use ISR to serve static pages instantly and regenerate content in the background.

2Set revalidate time based on how fresh your content needs to be.

3Avoid blocking user requests by never regenerating pages synchronously on request.

Performance Quiz - 3 Questions

How does ISR improve page load performance compared to server-side rendering?

A By serving cached static pages instantly and regenerating in the background

B By regenerating pages on every user request synchronously

C By loading all data on the client side after page load

D By disabling caching completely

DevTools: Performance

How to check: Record page load and look for long tasks blocking main thread. Check if initial HTML is served quickly and regeneration happens after.

What to look for: Fast Time to First Byte (TTFB) and short Largest Contentful Paint (LCP) indicate good ISR performance.