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

Concept Flow - Parallel data fetching pattern

Start Component Render

↓

Trigger Data Fetches in Parallel

↓

Wait for All Fetches to Complete

↓

Combine Results

↓

Render UI with All Data

The component starts rendering, triggers multiple data fetches at the same time, waits for all to finish, then combines the results to render the UI.

Execution Sample

NextJS

export default async function Page() {
  const [posts, users] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/posts').then(r => r.json()),
    fetch('https://jsonplaceholder.typicode.com/users').then(r => r.json())
  ])
  return <main>{posts.length} posts and {users.length} users loaded.</main>
}

This Next.js server component fetches posts and users data in parallel, then renders their counts.

Execution Table

Step	Action	Evaluation	Result
1	Start component execution	No data fetched yet	posts = undefined, users = undefined
2	Trigger Promise.all with two fetches	Both fetches start simultaneously	Two pending promises
3	Wait for both fetches to resolve	Fetch posts resolves	posts data array received
4	Wait for both fetches to resolve	Fetch users resolves	users data array received
5	Promise.all resolves with [posts, users]	Destructure results	posts and users assigned
6	Render JSX with posts.length and users.length	Calculate lengths	Rendered text: '100 posts and 10 users loaded.'

💡 Both fetches complete, Promise.all resolves, component renders with combined data.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
posts	undefined	posts data array received	posts data array received	posts data array
users	undefined	undefined	users data array received	users data array

Key Moments - 2 Insights

Why do we use Promise.all instead of awaiting each fetch one by one?

Using Promise.all starts both fetches at the same time, making the total wait time shorter. Awaiting one fetch before starting the next would make them run sequentially and take longer. See execution_table steps 2-4.

What happens if one fetch fails inside Promise.all?

Promise.all rejects immediately if any fetch fails, so the component won't get partial data. You must handle errors to avoid breaking the UI. This is implied after step 4 in execution_table.

Visual Quiz - 3 Questions

Look at the execution table, what is the state of 'users' after step 3?

A undefined

B Promise pending

C users data array received

D Empty array

💡 Hint

Check the variable_tracker column 'After Step 3' for 'users'

At which step does Promise.all resolve with both data arrays?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look at execution_table row where destructuring happens

If the fetch for posts takes longer, how does that affect the total wait time?

A Total wait time equals the shorter fetch time

B Total wait time equals the longer fetch time

C Total wait time is the sum of both fetch times

D Total wait time is zero

💡 Hint

Promise.all waits for all promises; see execution_table steps 3 and 4

Concept Snapshot

Parallel Data Fetching in Next.js
- Use Promise.all to start multiple fetches simultaneously
- Await Promise.all to wait for all to finish
- Destructure results to get each data set
- Render UI after all data is ready
- Improves performance by reducing total wait time

Full Transcript

This example shows how a Next.js server component fetches two data sources in parallel using Promise.all. The component starts both fetches at the same time, waits for both to complete, then uses the combined data to render the UI. This pattern reduces total waiting time compared to fetching sequentially. The execution table traces each step: starting fetches, waiting for each to resolve, destructuring results, and rendering. The variable tracker shows how 'posts' and 'users' variables change from undefined to their data arrays. Key moments clarify why Promise.all is used and what happens if a fetch fails. The visual quiz tests understanding of variable states and timing. This pattern is essential for efficient data loading in modern Next.js apps.

Practice

1. What is the main benefit of using the Parallel data fetching pattern in Next.js?

easy

A. It delays fetching data until the user clicks a button.

B. It fetches multiple data sources at the same time to reduce loading time.

C. It fetches data one after another to ensure order.

D. It caches data permanently on the server.

Solution

1. Step 1: Understand parallel fetching concept

   Parallel fetching means requesting multiple data sources simultaneously rather than waiting for one to finish before starting the next.

2. Step 2: Identify the benefit in Next.js context

   Fetching data in parallel reduces total wait time, improving page load speed and user experience.

3. Final Answer:

   It fetches multiple data sources at the same time to reduce loading time. -> Option B

4. Quick Check:

   Parallel fetching = faster loading [OK]

Hint: Parallel means multiple fetches run together, not one by one [OK]

Common Mistakes:

• Thinking parallel means sequential fetching
• Confusing caching with parallel fetching
• Assuming parallel fetching waits for user action

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

easy

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

B. const data1 = await fetch(url1); const data2 = await fetch(url2);

C. const data1 = fetch(url1).then(); const data2 = fetch(url2).then();

D. const data1 = Promise.all(fetch(url1)); const data2 = Promise.all(fetch(url2));

Solution

1. Step 1: Recognize correct Promise.all usage

   Promise.all takes an array of promises and returns a single promise that resolves when all have resolved.

2. Step 2: Match syntax with parallel fetch

   Using await Promise.all([fetch(url1), fetch(url2)]) runs both fetches at the same time and waits for both results.

3. Final Answer:

   const [data1, data2] = await Promise.all([fetch(url1), fetch(url2)]); -> Option A

4. Quick Check:

   Promise.all with array = parallel fetch [OK]

Hint: Use await Promise.all with an array of fetch calls [OK]

Common Mistakes:

• Awaiting fetch calls one after another (sequential)
• Using Promise.all incorrectly on single fetch
• Not destructuring the array result

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

async function fetchData() {
  const [res1, res2] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2')
  ]);
  console.log(res1.ok, res2.ok);
}
fetchData();

medium

A. [false, false] always because Promise.all fails

B. SyntaxError because Promise.all cannot destructure

C. [true, false] if first fetch succeeds and second fails

D. [true, true] if both fetches succeed

Solution

1. Step 1: Understand Promise.all behavior

   Promise.all resolves only if all promises succeed; otherwise, it rejects.

2. Step 2: Analyze console.log output

   If both fetches succeed, res1.ok and res2.ok will be true, so console logs [true, true].

3. Final Answer:

   [true, true] if both fetches succeed -> Option D

4. Quick Check:

   Promise.all success = all true [OK]

Hint: Promise.all resolves only if all fetches succeed [OK]

Common Mistakes:

• Assuming Promise.all returns false on failure instead of rejecting
• Thinking destructuring causes syntax error
• Confusing fetch response with data content

4. Identify the error in this Next.js parallel fetching code:

async function getData() {
  const data1 = fetch('/api/data1');
  const data2 = fetch('/api/data2');
  const results = await Promise.all(data1, data2);
  return results;
}

medium

A. You cannot use Promise.all with fetch in Next.js.

B. fetch calls must be awaited before Promise.all.

C. Promise.all expects an array, but data1 and data2 are passed as separate arguments.

D. The function should not be async.

Solution

1. Step 1: Check Promise.all argument

   Promise.all requires a single array of promises, but here two promises are passed as separate arguments.

2. Step 2: Correct usage

   It should be Promise.all([data1, data2]) to run fetches in parallel correctly.

3. Final Answer:

   Promise.all expects an array, but data1 and data2 are passed as separate arguments. -> Option C

4. Quick Check:

   Promise.all needs array argument [OK]

Hint: Always pass an array to Promise.all, not separate arguments [OK]

Common Mistakes:

• Passing multiple arguments instead of an array to Promise.all
• Awaiting fetch before Promise.all (sequential fetch)
• Misunderstanding async function requirements

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 pattern correctly handles this?

hard

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

B. Use Promise.all to fetch both, then check user info before rendering posts.

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

D. Fetch both sequentially without checking results.

Solution

1. Step 1: Understand dependency between data

   Posts depend on user info, so user info must be fetched and verified first.

2. Step 2: Choose correct fetching order

   Fetch user info first; if successful, then fetch posts. This avoids unnecessary posts fetch if user info fails.

3. Final Answer:

   Fetch user info first, then fetch posts only if user info fetch succeeds. -> Option A

4. Quick Check:

   Dependent fetches require sequential order [OK]

Hint: Fetch dependent data sequentially, independent data in parallel [OK]

Common Mistakes:

• Fetching dependent data in parallel without checks
• Ignoring fetch failure conditions
• Fetching unnecessary data causing wasted resources