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.