Revalidation strategies (time-based) in NextJS - Performance & Optimization

Performance: Revalidation strategies (time-based)

MEDIUM IMPACT

This affects how often the page content is refreshed and how fast users see updated content without blocking the initial load.

Serving fresh content without slowing down page load

NextJS

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60 // Rebuild page in background every 60 seconds
  };
}

Page serves cached content immediately and updates in background, improving load speed and freshness.

📈 Performance GainImproves LCP by serving cached page instantly; background revalidation is non-blocking

Serving fresh content without slowing down page load

NextJS

export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

// No revalidation, page rebuilds only at deploy time

Content is stale until next deploy, causing poor user experience with outdated data.

📉 Performance CostNo reflows triggered but causes poor LCP due to stale content and manual rebuilds

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No revalidation (static only)	Minimal DOM nodes	0 reflows on load	Fast paint but stale content	[!] OK
Time-based revalidation (e.g., 60s)	Minimal DOM nodes	0 reflows on load	Fast paint with fresh content over time	[OK] Good

Rendering Pipeline

Time-based revalidation serves cached HTML immediately, avoiding blocking the main thread. The browser paints the cached page fast, while Next.js triggers a background rebuild on the server. Once rebuilt, the new page replaces the cache for future requests.

→Network

→Server Rendering

→Browser Paint

⚠️ BottleneckServer Rendering during background rebuild

Core Web Vital Affected

LCP

This affects how often the page content is refreshed and how fast users see updated content without blocking the initial load.

Optimization Tips

1Serve cached pages immediately to improve load speed.

2Use background revalidation to keep content fresh without blocking users.

3Choose revalidation intervals that balance freshness and server performance.

Performance Quiz - 3 Questions

What is the main performance benefit of using time-based revalidation in Next.js?

A Serving cached pages instantly while updating content in the background

B Forcing the server to rebuild pages on every user request

C Disabling caching to always serve fresh content

D Preloading all pages at build time regardless of usage

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page and observe if HTML is served from cache (status 200 with size 'from disk cache') or freshly fetched.

What to look for: Look for fast initial HTML load indicating cached content; background revalidation won't block this load.