Parallel data fetching in NextJS - Step-by-Step Execution

Concept Flow - Parallel data fetching

Start Component Render

↓

Trigger Data Fetches

↓

Run fetch1 and fetch2 in parallel

↓

Wait for both fetches to complete

↓

Combine results

↓

Render UI with data

↓

User sees combined data

The component starts rendering, triggers multiple data fetches at the same time, waits for all to finish, then renders the UI with combined data.

Execution Sample

NextJS

async function fetchData() {
  const [res1, res2] = await Promise.all([
    fetch('/api/data1'),
    fetch('/api/data2')
  ]);
  const data1 = await res1.json();
  const data2 = await res2.json();
  return { data1, data2 };
}

This code fetches two API endpoints at the same time, waits for both to finish, then returns their JSON data together.

Execution Table

Step	Action	Evaluation	Result
1	Start fetchData function	No data fetched yet	Function begins
2	Call Promise.all with fetch('/api/data1') and fetch('/api/data2')	Both fetches start simultaneously	Two pending promises
3	Wait for both fetches to resolve	fetch('/api/data1') resolves first	res1 contains response 1, res2 pending
4	fetch('/api/data2') resolves	Both fetches done	res2 contains response 2
5	Call res1.json()	Parse JSON from response 1	data1 contains parsed data 1
6	Call res2.json()	Parse JSON from response 2	data2 contains parsed data 2
7	Return combined data	Return { data1, data2 }	Function returns combined data object
8	Component receives data	Render UI with data1 and data2	UI shows combined data

💡 Both fetches complete and JSON parsed, data combined and returned

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	After Step 6	Final
res1	undefined	Response object from /api/data1 (resolved)	Response object from /api/data1	Response object from /api/data1	Response object from /api/data1	Response object from /api/data1
res2	undefined	Pending	Response object from /api/data2 (resolved)	Response object from /api/data2	Response object from /api/data2	Response object from /api/data2
data1	undefined	undefined	undefined	Parsed JSON data from res1	Parsed JSON data from res1	Parsed JSON data from res1
data2	undefined	undefined	undefined	undefined	Parsed JSON data from res2	Parsed JSON data from res2

Key Moments - 3 Insights

Why do both fetches start at the same time instead of one after the other?

Because Promise.all runs both fetch calls simultaneously, as shown in execution_table step 2, so they don't wait for each other.

What happens if one fetch fails while the other succeeds?

Promise.all rejects immediately if any fetch fails, so the combined result won't return. This is why error handling is important but not shown here.

Why do we await res1.json() and res2.json() separately after Promise.all?

Because Promise.all only waits for the fetch responses, not the JSON parsing. Parsing is asynchronous and must be awaited separately as in steps 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the state of res2?

A res2 is undefined

B res2 has resolved with response data

C res2 is still pending (not resolved)

D res2 contains parsed JSON data

💡 Hint

Check the 'Evaluation' and 'Result' columns at step 3 in execution_table

At which step does the function return the combined data object?

A Step 7

B Step 5

C Step 3

D Step 8

💡 Hint

Look for the 'Return combined data' action in execution_table

If we remove Promise.all and await fetches one by one, how would the execution_table change?

A Fetches would run in parallel as before

B Fetch('/api/data2') would start only after fetch('/api/data1') completes

C Both fetches would fail

D The function would return before any fetch completes

💡 Hint

Promise.all runs fetches together; removing it causes sequential fetches

Concept Snapshot

Parallel data fetching in Next.js:
Use Promise.all to start multiple fetches at once.
Await Promise.all to wait for all to finish.
Then parse each response's JSON separately.
This speeds up data loading by running requests together.

Full Transcript

This visual execution shows how parallel data fetching works in Next.js using Promise.all. The component triggers two fetch calls at the same time. The execution table traces each step: starting fetches, waiting for both to resolve, parsing JSON from each response, and finally returning combined data. The variable tracker shows how response and data variables change after each step. Key moments clarify why fetches run simultaneously, how errors affect Promise.all, and why JSON parsing is awaited separately. The quiz tests understanding of fetch states and the effect of Promise.all. The snapshot summarizes the pattern: use Promise.all to fetch in parallel, await all, then parse JSON. This approach improves performance by not waiting for each fetch sequentially.