Data fetching in server components in NextJS - Step-by-Step Execution

Concept Flow - Data fetching in server components

Start Server Component Render

↓

Call async data fetching function

↓

Wait for data to be fetched

↓

Receive data

↓

Render component with data

↓

Send HTML to client

↓

End

The server component starts rendering, fetches data asynchronously, waits for it, then renders the UI with the data before sending HTML 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 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 begins execution
2	Call fetch('https://api.example.com/data')	Starts network request	Promise pending
3	Await fetch response	Wait for network	Response received
4	Call res.json()	Parse JSON body	Promise pending
5	Await res.json()	Wait for parsing	{"message":"Hello from API"}
6	Render <div>{data.message}</div>	Insert message into JSX	<div>Hello from API</div>
7	Send rendered HTML to client	HTML ready	Client receives <div>Hello from API</div>
8	End	Rendering complete	Server component finished

💡 Rendering ends after data is fetched and HTML is generated for the client.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
res	undefined	Response object	Response object	Response object
data	undefined	undefined	{"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 that take time to complete. Using 'await' pauses execution until the data is ready, as shown in steps 3 and 5 of the execution table.

What happens if we try to render before data is fetched?

The component would not have the data to display, causing errors or empty content. The execution table shows rendering happens only after data is fetched (step 6).

Visual Quiz - 3 Questions

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

A Response object

B undefined

C {"message":"Hello from API"}

D Promise pending

💡 Hint

Check the 'data' variable in variable_tracker after step 3.

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

A Step 6

B Step 4

C Step 2

D Step 8

💡 Hint

Look at the 'Render

{data.message}

' action in the execution_table.

If the fetch call took longer, which step would be delayed?

A Step 1

B Step 6

C Step 3

D Step 8

💡 Hint

Step 3 is where the component waits for the fetch response.

Concept Snapshot

Data fetching in server components:
- Use async functions with await
- Fetch data before rendering
- Render UI with fetched data
- Server sends ready HTML to client
- No client-side loading needed

Full Transcript

In Next.js server components, data fetching happens during the server-side rendering process. The component function is async and uses await to pause execution until the fetch call completes and the JSON data is parsed. Once data is ready, the component renders JSX with the data included. The server then sends the fully rendered HTML to the client. This means the client receives content immediately without waiting for data loading. The execution table shows each step from starting the component, fetching data, parsing it, rendering, and sending HTML. Variables like 'res' and 'data' change as the fetch and parsing complete. Using await ensures the component waits for data before rendering, preventing errors or empty content.