Revalidation patterns in NextJS - Performance & Optimization

Performance: Revalidation patterns

MEDIUM IMPACT

This affects how quickly updated content appears on the page and how often the server regenerates pages, impacting load speed and server response.

Updating static pages with fresh data in Next.js

NextJS

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

Less frequent revalidation reduces server load and speeds up response, improving LCP.

📈 Performance GainReduces server regenerations by 60x, lowering CPU use and improving load speed.

Updating static pages with fresh data in Next.js

NextJS

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return {
    props: { data },
    revalidate: 1 // revalidates every 1 second
  };
}

Revalidating every second causes frequent server regeneration, increasing server load and slowing response times.

📉 Performance CostTriggers server regeneration on nearly every request, increasing server CPU and delaying LCP.

Performance Comparison

Pattern	Server Regenerations	Network Delay	LCP Impact	Verdict
Revalidate every 1 second	High (every request)	High	High delay	[X] Bad
Revalidate every 60 seconds	Low (once per minute)	Low	Low delay	[OK] Good
No revalidation	None	Low	Stale content hurts UX	[! ] OK
On-demand revalidation	Only on content change	Low	Fast fresh content	[OK] Good

Rendering Pipeline

Revalidation affects the server-side generation stage before the browser rendering pipeline. When a page is revalidated, the server regenerates HTML and JSON data, which then impacts how quickly the browser receives fresh content to paint.

→Server-side Rendering

→Network Transfer

→Browser Paint

⚠️ BottleneckServer-side regeneration delays the initial HTML response, impacting LCP.

Core Web Vital Affected

LCP

This affects how quickly updated content appears on the page and how often the server regenerates pages, impacting load speed and server response.

Optimization Tips

1Avoid very short revalidation intervals to reduce server load and improve LCP.

2Use on-demand revalidation to update pages only when content changes.

3Balance freshness and performance by choosing appropriate revalidation timing.

Performance Quiz - 3 Questions

What is the main performance risk of setting a very short revalidation interval in Next.js?

A Browser caching is disabled

B Pages become stale and outdated

C Increased server load causing slower page loads

D Client-side JavaScript bundle size increases

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, and check the timing of the HTML document and JSON data fetches. Look for fast server responses and fresh content timestamps.

What to look for: Look for quick server response times and verify if content updates after revalidation triggers without full rebuild delays.