On-demand revalidation in NextJS - Performance & Optimization

Performance: On-demand revalidation

MEDIUM IMPACT

On-demand revalidation affects how quickly updated content appears without rebuilding the entire site, impacting page load speed and freshness.

Updating static pages after content changes

NextJS

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req, res) {
  // Trigger revalidation for specific path
  await res.revalidate('/path-to-update');
  res.json({ revalidated: true });
}

// Only updated pages rebuild on demand

Only revalidates changed pages on demand, avoiding full rebuilds and reducing load time.

📈 Performance GainReduces rebuild time from seconds to milliseconds, improving LCP

Updating static pages after content changes

NextJS

export async function getStaticProps() {
  // fetch data
  return { props: { data }, revalidate: 60 };
}
// Full site rebuild triggered on every change or long revalidate interval

Triggers full or frequent rebuilds causing slower page loads and stale content.

📉 Performance CostBlocks rendering for full rebuild duration, increasing LCP by seconds

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full static rebuild on every change	N/A (server-side)	N/A	Blocks LCP until rebuild completes	[X] Bad
On-demand revalidation for specific pages	N/A (server-side)	N/A	Minimal impact on LCP, fast update	[OK] Good

Rendering Pipeline

On-demand revalidation updates cached pages asynchronously, so the browser serves fresh content without blocking initial rendering.

→Server-side Rendering

→Cache Update

→Network Response

⚠️ BottleneckServer-side rebuild time for updated pages

Core Web Vital Affected

LCP

On-demand revalidation affects how quickly updated content appears without rebuilding the entire site, impacting page load speed and freshness.

Optimization Tips

1Trigger revalidation only for pages that changed to minimize rebuild time.

2Avoid full site rebuilds on every content update to improve LCP.

3Use API routes to call res.revalidate() for precise cache updates.

Performance Quiz - 3 Questions

What is the main performance benefit of on-demand revalidation in Next.js?

A It disables caching to always fetch fresh data

B It preloads all pages at build time

C It updates only changed pages without rebuilding the entire site

D It forces client-side rendering for all pages

DevTools: Network

How to check: Open DevTools Network tab, reload page, and observe if the page is served from cache or triggers a revalidation request.

What to look for: Look for 200 status with fresh content or 304 not modified; fast responses indicate good on-demand revalidation.