How Next.js renders (server-first model) - Visual Walkthrough

Concept Flow - How Next.js renders (server-first model)

User requests page URL

↓

Next.js Server receives request

↓

Server renders React components to HTML

↓

Server sends HTML + minimal JS to browser

↓

Browser displays HTML immediately

↓

Browser runs React JS to hydrate page

↓

Page becomes interactive

↓

User interacts with page -> React handles events

This flow shows how Next.js first renders pages on the server, sends HTML to the browser, then hydrates React for interactivity.

Execution Sample

NextJS

export default function Page() {
  return <h1>Hello from Next.js!</h1>;
}

A simple Next.js page component that renders a heading on the server and sends HTML to the browser.

Execution Table

Step	Action	Server State	Browser State	Output/Effect
1	User requests /page	Waiting for request	Idle	Request sent to server
2	Server receives request	Request received	Waiting	Start rendering React component
3	Server renders <h1>Hello from Next.js!</h1>	HTML generated	Waiting	HTML ready to send
4	Server sends HTML + JS to browser	Idle	Receiving HTML + JS	Browser starts parsing
5	Browser displays HTML	Idle	HTML rendered	User sees heading immediately
6	Browser runs React JS to hydrate	Idle	React hydrates DOM	Page becomes interactive
7	User clicks button (if any)	Idle	React handles event	Page responds to user
8	End	Idle	Interactive page	Rendering complete

💡 Rendering ends after hydration and page becomes interactive in the browser.

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 6	Final
Server HTML	None	<h1>Hello from Next.js!</h1>	<h1>Hello from Next.js!</h1>	<h1>Hello from Next.js!</h1>	<h1>Hello from Next.js!</h1>
Browser DOM	Empty	Empty	<h1>Hello from Next.js!</h1>	<h1>Hello from Next.js!</h1> (hydrated)	<h1>Hello from Next.js!</h1> (interactive)
React State	None	None	None	Initialized	Active

Key Moments - 3 Insights

Why does the user see content immediately before React runs in the browser?

Because Next.js sends fully rendered HTML from the server first (see Step 5 in execution_table), so the browser can display content right away.

What does hydration mean in Next.js rendering?

Hydration is when React runs in the browser to attach event handlers and make the static HTML interactive (see Step 6 in execution_table).

Does the server keep running React after sending HTML?

No, after sending the HTML and JS bundle, the server waits for new requests. The browser handles interactivity (see Steps 4 and 7).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the browser first display the page content?

A Step 5

B Step 3

C Step 6

D Step 2

💡 Hint

Check the 'Browser State' and 'Output/Effect' columns for when HTML is rendered.

According to the variable tracker, what is the state of React after Step 5?

A Initialized

B None

C Active

D Hydrated

💡 Hint

Look at the 'React State' row and the column for 'After Step 5'.

If the server did not send HTML first, how would the browser state change at Step 5?

A Browser DOM would show the heading

B React State would be active

C Browser DOM would be empty

D Server HTML would be None

💡 Hint

Refer to the 'Browser DOM' variable in variable_tracker at 'After Step 5'.

Concept Snapshot

Next.js renders pages on the server first.
Server sends fully rendered HTML plus JS to browser.
Browser shows HTML immediately for fast display.
Then React hydrates HTML to add interactivity.
This server-first model improves speed and SEO.

Full Transcript

When a user requests a page, Next.js server receives the request and renders React components into HTML. This HTML is sent to the browser along with minimal JavaScript. The browser displays the HTML immediately, so the user sees content fast. Then React runs in the browser to hydrate the page, attaching event handlers and making it interactive. After hydration, the page responds to user actions using React. The server waits for new requests and does not keep running React for interactivity. This server-first rendering model helps pages load quickly and improves search engine optimization.