Sequential data fetching in NextJS - Performance & Optimization

Performance: Sequential data fetching

MEDIUM IMPACT

This affects page load speed and interaction readiness by delaying data availability until each fetch completes in order.

Fetching multiple API endpoints to render a page

NextJS

const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json())
]);

Fetches run in parallel, reducing total wait time to the slowest single fetch duration.

📈 Performance GainReduces LCP by up to N times where N is number of sequential fetches; non-blocking rendering.

Fetching multiple API endpoints to render a page

NextJS

const data1 = await fetch('/api/data1').then(res => res.json());
const data2 = await fetch('/api/data2').then(res => res.json());
const data3 = await fetch('/api/data3').then(res => res.json());

Each fetch waits for the previous one to finish, causing longer total wait time before rendering.

📉 Performance CostBlocks rendering until all fetches complete sequentially, increasing LCP by multiple seconds depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Sequential fetches	Minimal DOM nodes until data arrives	Single reflow after all data loads	High paint delay due to waiting	[X] Bad
Parallel fetches	Minimal DOM nodes until data arrives	Single reflow after all data loads	Lower paint delay, faster LCP	[OK] Good

Rendering Pipeline

Sequential fetching delays data availability, blocking the browser from painting main content until all data arrives. This stalls the Style Calculation and Layout stages because content size and structure depend on fetched data.

→Data Fetching

→Style Calculation

→Layout

→Paint

⚠️ BottleneckData Fetching stage is the bottleneck as each request waits for the previous one.

Core Web Vital Affected

LCP

This affects page load speed and interaction readiness by delaying data availability until each fetch completes in order.

Optimization Tips

1Avoid waiting for one fetch to finish before starting the next.

2Use Promise.all to fetch multiple resources in parallel.

3Parallel fetching reduces Largest Contentful Paint and improves user experience.

Performance Quiz - 3 Questions

What is the main performance drawback of sequential data fetching in Next.js?

A It increases bundle size significantly.

B It delays rendering until all data is fetched one by one.

C It causes layout shifts during rendering.

D It blocks user input events indefinitely.

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for long gaps in the 'Network' section where requests happen one after another. Check the 'Timings' for LCP and total blocking time.

What to look for: Long sequential network requests causing delayed main thread activity and increased LCP.