Fetch caching behavior in NextJS - Performance & Optimization

Performance: Fetch caching behavior

MEDIUM IMPACT

This affects how quickly data loads on the page and how often the browser or server fetches data again.

Fetching data on page load with caching

NextJS

const res = await fetch('/api/data', { cache: 'force-cache' });
const data = await res.json();

Uses cached response if available, reducing network requests and speeding up load.

📈 Performance Gainreduces network requests, improves LCP by loading data faster

Fetching data on page load with caching

NextJS

const res = await fetch('/api/data', { cache: 'no-store' });
const data = await res.json();

This disables caching, causing a new network request on every page load, slowing down load time.

📉 Performance Costblocks rendering for every request, increases network latency

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fetch with no-store cache	Minimal	0	Low	[X] Bad
Fetch with force-cache	Minimal	0	Low	[OK] Good

Rendering Pipeline

Fetch caching affects the network request stage before rendering. Cached data can skip network delays, speeding up style calculation and layout.

→Network Request

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork Request

Core Web Vital Affected

LCP

This affects how quickly data loads on the page and how often the browser or server fetches data again.

Optimization Tips

1Use 'force-cache' or default caching to speed up repeated fetches.

2Avoid 'no-store' unless fresh data is critical every time.

3Check network tab to confirm caching behavior and reduce redundant requests.

Performance Quiz - 3 Questions

What is the main benefit of using fetch caching in Next.js?

A Reduces network requests and speeds up page load

B Increases the number of network requests

C Blocks rendering until all data is fetched

D Disables browser cache completely

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe if fetch requests are served from cache (status 200 from disk cache or 304).

What to look for: Look for fewer network requests and faster response times indicating effective caching.