Parallel data fetching pattern in NextJS - Performance & Optimization

Performance: Parallel data fetching pattern

HIGH IMPACT

This pattern affects page load speed by reducing the time to fetch multiple data sources simultaneously, improving the Largest Contentful Paint (LCP).

Fetching multiple API endpoints before rendering 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())
]);

All fetches run at the same time, reducing total wait to the longest single fetch.

📈 Performance GainReduces blocking time to max single fetch duration; improves LCP by up to 3x.

Fetching multiple API endpoints before rendering 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 sequential delays and slower page load.

📉 Performance CostBlocks rendering for sum of all fetch times; increases LCP significantly.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Sequential fetches	Minimal	0	High due to delayed content	[X] Bad
Parallel fetches with Promise.all	Minimal	0	Low due to faster content availability	[OK] Good

Rendering Pipeline

Parallel data fetching sends multiple requests simultaneously, allowing the browser and server to handle them concurrently. This reduces the waiting time before the rendering stage can start.

→Data Fetching

→Rendering

→Paint

⚠️ BottleneckData Fetching stage is the main bottleneck if requests are sequential.

Core Web Vital Affected

LCP

This pattern affects page load speed by reducing the time to fetch multiple data sources simultaneously, improving the Largest Contentful Paint (LCP).

Optimization Tips

1Always fetch independent data sources in parallel to reduce wait time.

2Avoid sequential await calls for multiple fetches to prevent blocking.

3Use Promise.all or similar concurrency helpers to optimize data fetching.

Performance Quiz - 3 Questions

What is the main benefit of fetching data in parallel in Next.js?

A Increases bundle size due to multiple fetch calls

B Ensures data is fetched in a specific order

C Reduces total data fetching time by running requests simultaneously

D Improves CSS selector performance

DevTools: Performance

How to check: Record a page load in DevTools Performance panel. Look at the Network waterfall to see if fetches happen sequentially or in parallel. Check the Main thread for blocking time.

What to look for: Parallel fetches show overlapping network requests and shorter blocking time before content paints, improving LCP.