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

Concept Flow - Sequential data fetching

Start Component Render

↓

Fetch Data 1

↓

Wait for Data 1

↓

Fetch Data 2 using Data 1

↓

Wait for Data 2

↓

Render UI with Data 1 & Data 2

↓

User Sees Combined Data

The component starts rendering, fetches the first data, waits for it, then uses it to fetch the second data, waits again, and finally renders the UI with both data sets.

Execution Sample

NextJS

export default async function Page() {
  const res1 = await fetch('https://api.example.com/data1');
  const data1 = await res1.json();
  const res2 = await fetch(`https://api.example.com/data2/${data1.id}`);
  const data2 = await res2.json();
  return <div>{data1.name} - {data2.detail}</div>;
}

This Next.js server component fetches data1, then uses its id to fetch data2, and finally renders both.

Execution Table

Step	Action	Evaluation	Result
1	Start component render	No data fetched yet	Component begins execution
2	Fetch data1 from API	Await fetch('https://api.example.com/data1')	Response object res1 received
3	Parse data1 JSON	Await res1.json()	{"id": 42, "name": "Alice"}
4	Fetch data2 using data1.id	Await fetch('https://api.example.com/data2/42')	Response object res2 received
5	Parse data2 JSON	Await res2.json()	{"detail": "Likes cats"}
6	Render UI with data1.name and data2.detail	Return JSX <div>Alice - Likes cats</div>	UI ready to display
7	Component render complete	All awaits resolved	Page shows 'Alice - Likes cats'

💡 All data fetched sequentially; component render completes with combined data.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
res1	undefined	Response object	Response object	Response object
data1	undefined	{"id": 42, "name": "Alice"}	{"id": 42, "name": "Alice"}	{"id": 42, "name": "Alice"}
res2	undefined	undefined	Response object	Response object
data2	undefined	undefined	{"detail": "Likes cats"}	{"detail": "Likes cats"}

Key Moments - 2 Insights

Why do we wait for data1 before fetching data2?

Because data2's URL depends on data1.id, we must wait for data1 to finish (see execution_table step 4). Fetching data2 before data1 would cause an error.

What happens if we don't use await with fetch?

Without await, the code moves on before data arrives, so data1 and data2 would be undefined or promises, causing render errors (see variable_tracker showing undefined before awaits).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of data1?

A Response object

B undefined

C {"id": 42, "name": "Alice"}

D Promise

💡 Hint

Check the 'Result' column at step 3 in execution_table.

At which step does the component fetch data2?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look for the fetch action using data1.id in execution_table.

If we remove await before fetch for data1, what changes in variable_tracker?

A data1 becomes a Promise instead of JSON object

B data1 becomes undefined

C data2 fetch happens earlier

D No change

💡 Hint

Without await, fetch returns a Promise, not the resolved JSON (see variable_tracker start values).

Concept Snapshot

Sequential Data Fetching in Next.js Server Components:
- Use async function with await to fetch data step-by-step.
- Await first fetch, parse JSON, then use result to fetch next.
- Ensures data dependencies are respected.
- Render UI only after all data is ready.
- Avoids race conditions and undefined data errors.

Full Transcript

This visual execution trace shows how a Next.js server component fetches data sequentially. First, it starts rendering and fetches data1 from an API. It waits for data1 to arrive and parses it as JSON. Then, it uses data1's id to fetch data2 from another API endpoint, waiting again for the response and parsing it. Finally, it renders the UI combining data1 and data2. Variables like res1, data1, res2, and data2 update step-by-step, showing how data flows through the component. Key points include the necessity of awaiting each fetch to ensure data is ready before moving on, and how removing await would cause data variables to hold promises instead of actual data. The quiz questions reinforce understanding of these steps and variable states.