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

Concept Flow - Async server components

Start Server Component Render

↓

Call async function

↓

Await data fetch

↓

Receive data

↓

Render JSX with data

↓

Send HTML to client

↓

End

The server component starts rendering, calls an async function to fetch data, waits for the data, then renders the UI with that data and sends HTML to the client.

Execution Sample

NextJS

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

This async server component fetches data from an API and renders it inside a div.

Execution Table

Step	Action	Evaluation	Result
1	Start rendering Page component	No data yet	Waiting for async call
2	Call fetch API	Promise pending	Fetching data from https://api.example.com/data
3	Await fetch response	Response received	Response JSON parsed
4	Assign data.message	data.message = 'Hello from API'	Ready to render JSX
5	Return JSX <div>{data.message}</div>	JSX created	<div>Hello from API</div>
6	Send HTML to client	HTML sent	Client receives rendered content

💡 Rendering ends after JSX is returned and HTML is sent to client

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
data	undefined	{"message":"Hello from API"}	{"message":"Hello from API"}	{"message":"Hello from API"}

Key Moments - 3 Insights

Why do we use 'await' inside the server component?

Because the component waits for the data fetch to finish before rendering, as shown in execution_table step 3 where it awaits the fetch response.

Does the client see the loading state during data fetch?

No, the server waits for data before sending HTML, so the client only receives the fully rendered content (execution_table step 6).

Can we use async/await in server components but not in client components?

Yes, async server components can await data directly during render, unlike client components which handle async differently.

Visual Quiz - 3 Questions

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

A undefined

B Promise pending

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

D null

💡 Hint

Check the 'variable_tracker' table column 'After Step 3' for 'data'

At which step does the component finish waiting for the data fetch?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at 'execution_table' step 3 where 'Await fetch response' completes

If the fetch URL changes, which step in the execution table changes?

A Step 2

B Step 5

C Step 1

D Step 6

💡 Hint

Step 2 shows the fetch API call URL

Concept Snapshot

Async server components in Next.js
- Use 'async' function for server components
- Await data fetch inside component
- Render JSX after data is ready
- Server sends fully rendered HTML to client
- Client sees no loading state during fetch

Full Transcript

Async server components in Next.js allow you to fetch data directly inside the component using async/await. The server waits for the data fetch to complete before rendering the JSX. This means the client receives fully rendered HTML without loading states. The flow starts with the component rendering, calls the async fetch, awaits the response, then renders the UI with the data. This approach simplifies data fetching and improves user experience by sending ready content.