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.

Practice

1. What is the main benefit of using async server components in Next.js?

easy

A. They enable real-time updates without refreshing the page.

B. They allow client-side state management inside the component.

C. They automatically cache data on the client device.

D. They fetch data before rendering, sending ready HTML to the browser.

Solution

1. Step 1: Understand async server components purpose

   Async server components fetch data on the server before rendering the page.

2. Step 2: Identify the benefit of pre-fetching data

   This means the browser receives fully rendered HTML, improving speed and user experience.

3. Final Answer:

   They fetch data before rendering, sending ready HTML to the browser. -> Option D

4. Quick Check:

   Async server components = fetch data first [OK]

Hint: Async server components fetch data before rendering [OK]

Common Mistakes:

• Thinking async components run on the client
• Confusing caching with async data fetching
• Assuming real-time updates happen automatically

2. Which of the following is the correct way to define an async server component in Next.js?

easy

A. async function MyComponent() { const data = await fetchData(); return {data}; }

B. function MyComponent() { const data = await fetchData(); return {data}; }

C. const MyComponent = () => { const data = await fetchData(); return {data}; }

D. const MyComponent = async () => { fetchData().then(data => {data}); }

Solution

1. Step 1: Identify async function syntax for components

   Next.js requires the component function to be marked async to use await inside.

2. Step 2: Check each option for correct async usage

   async function MyComponent() { const data = await fetchData(); return
   {data}; } correctly defines an async function and uses await inside. function MyComponent() { const data = await fetchData(); return

   {data}

   ; } misses async keyword. const MyComponent = () => { const data = await fetchData(); return

   {data}

   ; } uses arrow function but misses async. const MyComponent = async () => { fetchData().then(data =>

   {data}

   ); } uses then() but does not return JSX properly.

3. Final Answer:

   async function MyComponent() { const data = await fetchData(); return <div>{data}</div>; } -> Option A

4. Quick Check:

   Async keyword + await inside = async function MyComponent() { const data = await fetchData(); return
   {data}
   ; } [OK]

Hint: Async components must be declared with async keyword [OK]

Common Mistakes:

• Forgetting to add async keyword
• Using await without async function
• Returning JSX inside then() without return statement

3. Given this async server component code, what will be rendered?

async function Greeting() {
  const name = await Promise.resolve('Alice');
  return <h1>Hello, {name}!</h1>;
}

medium

A. <h1>Hello, Alice!</h1>

B. Hello, {name}!

C. Promise { 'Alice' }

D. Error: Cannot use await here

Solution

1. Step 1: Understand async function behavior in server components

   The function awaits the resolved promise 'Alice' and stores it in name.

2. Step 2: Render JSX with awaited value

   The component returns an h1 element with the text 'Hello, Alice!'. This HTML is sent to the browser.

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option A

4. Quick Check:

   Await resolves promise, renders value [OK]

Hint: Await resolves promise before rendering JSX [OK]

Common Mistakes:

• Thinking JSX shows variable name literally
• Expecting promise object to render
• Assuming await is disallowed in server components

4. What is wrong with this async server component code?

async function UserProfile() {
  const user = fetch('/api/user');
  return <div>{user.name}</div>;
}

medium

A. Cannot use fetch inside server components.

B. Missing await before fetch call, so user is a promise, not data.

C. JSX cannot contain expressions like {user.name}.

D. Function should not be async if it returns JSX.

Solution

1. Step 1: Check fetch usage in async function

   fetch returns a promise, so it must be awaited to get the data.

2. Step 2: Identify the error in accessing user.name

   Without await, user is a promise object, so user.name is undefined causing error.

3. Final Answer:

   Missing await before fetch call, so user is a promise, not data. -> Option B

4. Quick Check:

   Always await fetch to get data [OK]

Hint: Always await fetch to get resolved data [OK]

Common Mistakes:

• Forgetting await before fetch
• Thinking fetch is disallowed in server components
• Misunderstanding JSX expressions

5. You want to fetch user data and posts in an async server component and render them together. Which code correctly fetches both before rendering?

async function Dashboard() {
  const user = await fetch('/api/user').then(res => res.json());
  const posts = fetch('/api/posts').then(res => res.json());
  return (
    <div>
      <h1>{user.name}</h1>
      <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}

hard

A. Use then() only without await for both fetches.

B. Remove await before fetch('/api/user') to run both fetches in parallel.

C. Add await before fetch('/api/posts') to wait for posts data.

D. Return JSX before fetching posts to speed up rendering.

Solution

1. Step 1: Identify missing await for posts fetch

   The posts fetch is missing await, so posts is a promise, not data.

2. Step 2: Fix by adding await to posts fetch

   Adding await ensures posts data is ready before rendering the list.

3. Final Answer:

   Add await before fetch('/api/posts') to wait for posts data. -> Option C

4. Quick Check:

   Await all fetches before rendering [OK]

Hint: Await all fetches before using their data [OK]

Common Mistakes:

• Forgetting await on second fetch
• Removing await on first fetch causing errors
• Returning JSX before data is ready