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.

Practice

1. What is the main reason to use sequential data fetching in Next.js?

easy

A. Because later data depends on the results of earlier data

B. To fetch all data at the same time for speed

C. To avoid using async/await syntax

D. To fetch data only once when the app starts

Solution

1. Step 1: Understand the dependency in data fetching

   Sequential fetching is used when one piece of data needs the result of a previous fetch to continue.

2. Step 2: Compare with other fetching methods

   Parallel fetching gets all data at once, but sequential waits for each step because of dependency.

3. Final Answer:

   Because later data depends on the results of earlier data -> Option A

4. Quick Check:

   Sequential fetching = dependent data steps [OK]

Hint: Use sequential fetching when data depends on previous results [OK]

Common Mistakes:

• Thinking parallel fetching is always better
• Ignoring data dependencies
• Confusing async/await with parallel fetching

2. Which of the following is the correct syntax to fetch data sequentially using async/await in Next.js?

easy

A. const data1 = fetch(url1); const data2 = 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 = await fetch(url1); const data2 = await fetch(url2);

Solution

1. Step 1: Identify correct async/await usage

   Using await before fetch pauses execution until the promise resolves, ensuring sequential order.

2. Step 2: Check syntax correctness

   const data1 = await fetch(url1); const data2 = await fetch(url2); uses two separate await statements correctly. const data1 = await fetch(url1), const data2 = await fetch(url2); has a syntax error with comma instead of semicolon.

3. Final Answer:

   const data1 = await fetch(url1); const data2 = await fetch(url2); -> Option D

4. Quick Check:

   Separate awaits with semicolons = correct syntax [OK]

Hint: Use separate await statements with semicolons for sequential fetch [OK]

Common Mistakes:

• Using commas instead of semicolons between await calls
• Not using await causing parallel fetch
• Using then() without await for sequential logic

3. What will be the output of this Next.js code snippet?

async function fetchData() {
  const res1 = await fetch('https://api.example.com/user');
  const user = await res1.json();
  const res2 = await fetch(`https://api.example.com/posts?userId=${user.id}`);
  const posts = await res2.json();
  return posts.length;
}

medium

A. Always zero because fetch is asynchronous

B. An error because user.id is undefined

C. The number of posts for the fetched user

D. The total number of users

Solution

1. Step 1: Understand sequential fetch calls

   The first fetch gets user data, then uses user.id to fetch posts for that user.

2. Step 2: Analyze returned value

   The function returns posts.length, which is the count of posts for that user.

3. Final Answer:

   The number of posts for the fetched user -> Option C

4. Quick Check:

   Sequential fetch returns posts count [OK]

Hint: Check if later fetch depends on earlier data for output [OK]

Common Mistakes:

• Assuming user.id is undefined without checking response
• Confusing posts length with total users
• Thinking async fetch returns zero immediately

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

async function getData() {
  const user = fetch('/api/user');
  const posts = await fetch(`/api/posts?userId=${user.id}`);
  return posts.json();
}

medium

A. Incorrect URL format in second fetch

B. Missing await before first fetch causing user to be a Promise

C. Missing await before posts.json()

D. Using template literals incorrectly

Solution

1. Step 1: Check fetch usage for user

   fetch returns a Promise; without await, user is a Promise, not the data object.

2. Step 2: Understand impact on user.id

   Accessing user.id fails because user is not resolved yet, causing runtime error.

3. Final Answer:

   Missing await before first fetch causing user to be a Promise -> Option B

4. Quick Check:

   Always await fetch to get resolved data [OK]

Hint: Always await fetch before accessing response data [OK]

Common Mistakes:

• Forgetting await before fetch
• Assuming fetch returns data directly
• Not awaiting json() call

5. You want to fetch user info, then fetch their orders, and finally fetch details for each order sequentially in Next.js. Which approach correctly handles this?

hard

A. Use async/await to fetch user, then orders, then loop with await inside for-of to fetch each order detail

B. Fetch user and orders in parallel, then fetch order details in parallel with Promise.all

C. Fetch user, then orders, then map order details fetches without await inside map

D. Fetch all data at once without waiting for previous fetches

Solution

1. Step 1: Understand sequential dependency

   Order details depend on orders, which depend on user info, so fetches must be sequential.

2. Step 2: Use for-of with await for sequential order detail fetch

   Using for-of with await inside ensures each order detail fetch waits for the previous to finish.

3. Final Answer:

   Use async/await to fetch user, then orders, then loop with await inside for-of to fetch each order detail -> Option A

4. Quick Check:

   Sequential fetch with for-of and await = correct approach [OK]

Hint: Use for-of with await for sequential loops in async functions [OK]

Common Mistakes:

• Using map without await causing parallel fetch
• Fetching all data at once ignoring dependencies
• Mixing parallel and sequential fetch incorrectly