Fetch in server components in NextJS - Step-by-Step Execution

Concept Flow - Fetch in server components

Start Server Component Render

↓

Call fetch() to get data

↓

Await fetch response

↓

Parse JSON data

↓

Render component with data

↓

Send HTML to client

↓

End

The server component starts rendering, fetches data asynchronously, waits for the data, then renders HTML with that data before sending it to the client.

Execution Sample

NextJS

export default async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <div>{data.message}</div>;
}

This server component fetches data from an API, waits for the JSON response, then renders a div showing the message from the data.

Execution Table

Step	Action	Evaluation	Result
1	Start rendering Page component	No data yet	Component starts
2	Call fetch('https://api.example.com/data')	Returns Promise	Pending fetch
3	Await fetch response	Waits for network	Response received
4	Call res.json()	Returns Promise	Pending JSON parse
5	Await JSON parse	Waits for parsing	{ message: 'Hello from API' }
6	Render <div>{data.message}</div>	data.message = 'Hello from API'	<div>Hello from API</div>
7	Send HTML to client	HTML ready	Client receives rendered HTML

💡 Rendering completes after data is fetched and component returns HTML.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
res	undefined	Promise (pending)	Response object	Response object	Response object	Response object
data	undefined	undefined	undefined	Promise (pending)	{ message: 'Hello from API' }	{ message: 'Hello from API' }

Key Moments - 2 Insights

Why do we use 'await' before fetch and res.json()?

Because fetch and res.json() return Promises, 'await' pauses execution until the data is ready, as shown in steps 3 and 5 of the execution table.

Does the client see the fetch call or the raw data?

No, the client only receives the final rendered HTML (step 7). The fetch happens on the server during rendering.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'data' after step 5?

A { message: 'Hello from API' }

B Promise (pending)

C undefined

D Response object

💡 Hint

Check the 'data' row in variable_tracker after step 5.

At which step does the component start rendering the HTML with the fetched data?

A Step 3

B Step 6

C Step 2

D Step 5

💡 Hint

Look for the step where the JSX with data.message is created in the execution_table.

If we remove 'await' before fetch, what happens in the execution flow?

A The fetch call is skipped entirely.

B The component waits longer for data.

C The component renders before data is fetched, showing a Promise object.

D The client receives raw JSON instead of HTML.

💡 Hint

Consider how Promises behave without 'await' in the execution_table steps 2 and 3.

Concept Snapshot

Fetch in Server Components (Next.js):
- Use 'await fetch(url)' inside async server components.
- Await response and parse JSON with 'await res.json()'.
- Render JSX with fetched data.
- Data fetching happens on server, client gets ready HTML.
- No client-side loading states needed for server fetch.

Full Transcript

In Next.js server components, fetching data uses the fetch API with async/await. The component starts rendering, calls fetch to get data from an API, and waits for the response. Then it parses the JSON data and uses it to render JSX. Finally, the server sends the fully rendered HTML to the client. This means the client sees the final content immediately without extra loading. The execution table shows each step: starting render, fetching, awaiting response, parsing JSON, rendering JSX, and sending HTML. Variables like 'res' and 'data' change from undefined to promises to actual data objects as the code runs. Beginners often wonder why 'await' is needed and if the client sees the fetch call. The answer is that 'await' pauses execution until data is ready, and the client only gets the rendered HTML, not the fetch process. If 'await' is missing, the component tries to render before data arrives, showing a Promise instead of real content.