Server component execution model in NextJS - Step-by-Step Execution

Concept Flow - Server component execution model

Request from Client

↓

Server receives request

↓

Server renders Server Component

↓

Execute component code on server

↓

Generate HTML output

↓

Send HTML to Client

↓

Client receives and displays HTML

↓

Client may hydrate Client Components if any

This flow shows how Next.js Server Components run only on the server to generate HTML before sending it to the client.

Execution Sample

NextJS

export default function Greeting() {
  const time = new Date().toLocaleTimeString();
  return <h1>Hello! The time is {time}</h1>;
}

A simple server component that renders the current time as HTML on the server.

Execution Table

Step	Action	Code Executed	Result/Output
1	Receive request	Client requests page with Greeting component	Request received by server
2	Render component	Call Greeting()	Function runs on server
3	Evaluate expression	new Date().toLocaleTimeString()	Gets current server time string
4	Return JSX	return <h1>Hello! The time is {time}</h1>;	JSX converted to HTML string
5	Send response	Send HTML string to client	Client receives HTML <h1>Hello! The time is 10:30:00 AM</h1>
6	Client display	Browser renders HTML	User sees greeting with server time
7	Optional hydration	If client components exist, hydrate them	Client components become interactive

💡 Execution stops after HTML is sent to client and rendered.

Variable Tracker

Variable	Start	After Step 3	Final
time	undefined	"10:30:00 AM"	"10:30:00 AM"

Key Moments - 3 Insights

Why does the time shown not update on the client?

Because the time is generated once on the server during rendering (see execution_table step 3), the client only receives static HTML with that time.

Can server components use browser-only APIs like window or document?

No, server components run on the server where browser APIs don't exist, so using them would cause errors (see concept_flow where execution happens only on server).

What happens if the component includes client components?

The server renders the server components to HTML first, then the client hydrates client components to make them interactive (see execution_table step 7).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'time' after step 3?

A null

B "10:30:00 AM"

C undefined

D "Hello!"

💡 Hint

Check the variable_tracker and execution_table step 3 where time is assigned.

At which step does the server send the HTML to the client?

A Step 2

B Step 4

C Step 5

D Step 7

💡 Hint

Look at execution_table step 5 description about sending response.

If the component used 'window.alert', what would happen during execution?

A It would cause an error because 'window' is not defined on the server.

B It would work normally on the server.

C It would be ignored silently.

D It would run only after hydration on the client.

💡 Hint

Refer to key_moments about browser APIs not available on server.

Concept Snapshot

Server components run only on the server.
They generate HTML before sending to the client.
No browser APIs allowed in server components.
Client receives static HTML from server.
Client components hydrate later for interactivity.

Full Transcript

In Next.js, server components execute only on the server. When a client requests a page, the server runs the server component code, like the Greeting function, to generate HTML. For example, the current time is fetched on the server and inserted into the HTML. This HTML is sent to the client, which displays it as static content. Server components cannot use browser-only features like window or document because they run on the server. If the page includes client components, those hydrate on the client after the HTML loads, making them interactive. This model improves performance by reducing JavaScript sent to the client and rendering content faster.