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.

Practice

1. What is the main benefit of using Promise.all for data fetching in Next.js?

easy

A. It fetches multiple data sources at the same time, reducing total wait time.

B. It fetches data sequentially to avoid race conditions.

C. It caches data automatically for offline use.

D. It delays fetching until the user clicks a button.

Solution

1. Step 1: Understand Promise.all behavior

   Promise.all runs multiple promises in parallel and waits for all to finish.

2. Step 2: Relate to data fetching speed

   Fetching multiple data sources at once reduces total waiting time compared to sequential fetching.

3. Final Answer:

   It fetches multiple data sources at the same time, reducing total wait time. -> Option A

4. Quick Check:

   Parallel fetching = faster load [OK]

Hint: Remember: parallel means 'at the same time' [OK]

Common Mistakes:

• Thinking Promise.all fetches sequentially
• Confusing caching with parallel fetching
• Assuming it delays fetching until user action

2. Which of the following is the correct syntax to fetch two APIs in parallel using Promise.all in Next.js?

easy

A. const [res1, res2] = await Promise.all(fetch(url1), fetch(url2));

B. const [res1, res2] = await Promise.all([fetch(url1), fetch(url2)]);

C. const res1 = await fetch(url1); const res2 = await fetch(url2);

D. const res1 = fetch(url1).then(fetch(url2));

Solution

1. Step 1: Check Promise.all argument format

   Promise.all expects an array of promises, so the fetch calls must be inside an array.

2. Step 2: Identify correct syntax

   const [res1, res2] = await Promise.all([fetch(url1), fetch(url2)]); correctly uses an array: Promise.all([fetch(url1), fetch(url2)]). const [res1, res2] = await Promise.all(fetch(url1), fetch(url2)); misses the array brackets.

3. Final Answer:

   const [res1, res2] = await Promise.all([fetch(url1), fetch(url2)]); -> Option B

4. Quick Check:

   Array of promises = correct syntax [OK]

Hint: Always wrap promises in an array for Promise.all [OK]

Common Mistakes:

• Forgetting the array brackets around promises
• Using sequential awaits instead of Promise.all
• Chaining fetch calls incorrectly

3. Given this Next.js code snippet, what will be logged to the console?

async function fetchData() {
  const [userRes, postsRes] = await Promise.all([
    fetch('https://api.example.com/user'),
    fetch('https://api.example.com/posts')
  ]);
  console.log(userRes.status, postsRes.status);
}
fetchData();

medium

A. 200 200

B. undefined undefined

C. Promise Promise

D. Error: fetch is not defined

Solution

1. Step 1: Understand what fetch returns

   Each fetch returns a Response object with a status property indicating HTTP status.

2. Step 2: Analyze Promise.all result

   Promise.all waits for both fetches and returns an array of Response objects. Logging userRes.status and postsRes.status prints their HTTP status codes.

3. Final Answer:

   200 200 -> Option A

4. Quick Check:

   Response.status = 200 if successful [OK]

Hint: fetch returns Response objects with status property [OK]

Common Mistakes:

• Expecting fetch to return JSON directly
• Logging promises instead of awaited results
• Confusing undefined with Response properties

4. What is wrong with this Next.js code that tries to fetch two APIs in parallel?

async function getData() {
  const res1 = fetch('https://api.example.com/data1');
  const res2 = fetch('https://api.example.com/data2');
  const data1 = await res1.json();
  const data2 = await res2.json();
  return { data1, data2 };
}

medium

A. Nothing is wrong; this code fetches data correctly.

B. The fetch calls are not awaited in parallel, causing sequential fetching.

C. The function should use Promise.all to fetch in parallel.

D. You cannot call json() on a promise; you must await the fetch first.

Solution

1. Step 1: Identify the type of res1 and res2

   Both res1 and res2 are promises from fetch, not Response objects yet.

2. Step 2: Understand json() usage

   You must await the fetch promise to get the Response object before calling json(). Calling json() directly on a promise causes an error.

3. Final Answer:

   You cannot call json() on a promise; you must await the fetch first. -> Option D

4. Quick Check:

   Await fetch before json() [OK]

Hint: Always await fetch before calling json() [OK]

Common Mistakes:

• Calling json() on a fetch promise without awaiting
• Assuming fetch returns JSON directly
• Not using Promise.all for parallelism

5. You want to fetch user info and user posts in parallel in Next.js, but only display posts if user info fetch succeeds. Which approach correctly handles this?

hard

A. Use Promise.all for both fetches and check user info response before rendering posts.

B. Fetch user info first, then fetch posts only if user info fetch succeeds.

C. Use Promise.allSettled to fetch both, then conditionally render posts if user info succeeded.

D. Fetch posts first, then fetch user info regardless of posts fetch result.

Solution

1. Step 1: Understand requirement for conditional rendering

   Posts should display only if user info fetch succeeds, so we need to know each fetch's success independently.

2. Step 2: Choose correct parallel fetching method

   Promise.all fails fast if any promise rejects, so it can't handle partial success. Promise.allSettled waits for all promises and reports each result, allowing conditional logic.

3. Step 3: Apply conditional rendering logic

   After Promise.allSettled, check user info status; if successful, render posts, else skip posts.

4. Final Answer:

   Use Promise.allSettled to fetch both, then conditionally render posts if user info succeeded. -> Option C

5. Quick Check:

   Conditional render needs allSettled [OK]

Hint: Use allSettled to handle partial success in parallel fetches [OK]

Common Mistakes:

• Using Promise.all which fails on first error
• Fetching posts before confirming user info success
• Not handling fetch failures gracefully