Opting out of caching in NextJS - Performance & Optimization

Performance: Opting out of caching

HIGH IMPACT

This affects page load speed and server response time by disabling cache reuse, causing repeated data fetching or rendering.

Serving dynamic content without caching

NextJS

export const revalidate = 60;

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { next: { revalidate: 60 } });
  const data = await res.json();
  return <div>{data.value}</div>;
}

Allows Next.js to cache the page or data for 60 seconds, reducing server work and speeding up response.

📈 Performance GainReduces LCP by 200-500ms on repeat visits, lowers server CPU usage

Serving dynamic content without caching

NextJS

export const revalidate = 0;

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
  const data = await res.json();
  return <div>{data.value}</div>;
}

Disabling cache causes every request to fetch fresh data and re-render, increasing server load and delaying response.

📉 Performance CostBlocks rendering for every request, increasing LCP by 200-500ms depending on data size and network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching (revalidate=0)	Same DOM nodes each request	Multiple reflows due to delayed HTML	Higher paint cost due to slower load	[X] Bad
Caching enabled (revalidate>0)	Same DOM nodes reused	Single reflow on initial load	Lower paint cost due to faster load	[OK] Good

Rendering Pipeline

When caching is disabled, each request triggers fresh data fetching and server-side rendering, increasing server processing and delaying HTML delivery. This delays Style Calculation, Layout, and Paint on the client.

→Server Data Fetch

→Server Render

→Style Calculation

→Layout

→Paint

⚠️ BottleneckServer Render and Data Fetch stages

Core Web Vital Affected

LCP

This affects page load speed and server response time by disabling cache reuse, causing repeated data fetching or rendering.

Optimization Tips

1Avoid setting revalidate=0 unless absolutely necessary.

2Use incremental static regeneration (ISR) with a short revalidate time for fresh but cached content.

3Check cache headers in Network tab to verify caching behavior.

Performance Quiz - 3 Questions

What is the main performance impact of opting out of caching in Next.js?

A Page loads instantly from cache with no delay

B Every request fetches fresh data and re-renders, increasing load time

C Browser caches static assets only

D No impact on server load

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, check if responses have cache-control headers and if requests are served from cache

What to look for: Look for 'x-nextjs-cache' header or status '304 Not Modified' indicating caching; absence means no caching and slower loads