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.

Practice

1. What is the main reason Next.js renders pages on the server first?

easy

A. To avoid using React components

B. To run JavaScript only on the client

C. To improve page load speed and SEO

D. To prevent any HTML from being sent to the browser

Solution

1. Step 1: Understand server-first rendering purpose

   Next.js renders pages on the server to send fully formed HTML to the browser quickly.

2. Step 2: Connect server rendering to SEO and speed

   Sending ready HTML helps search engines read content and users see pages faster.

3. Final Answer:

   To improve page load speed and SEO -> Option C

4. Quick Check:

   Server-first rendering = better speed and SEO [OK]

Hint: Server rendering means faster pages and better SEO [OK]

Common Mistakes:

• Thinking server rendering delays page load
• Believing React is not used in Next.js
• Assuming HTML is not sent to the browser

2. Which Next.js function is used to fetch data on the server before rendering a page?

easy

A. getServerSideProps

B. componentDidMount

C. useEffect

D. getStaticProps

Solution

1. Step 1: Identify server-side data fetching functions

   Next.js provides getServerSideProps to fetch data on the server at request time.

2. Step 2: Differentiate from other functions

   getStaticProps runs at build time, useEffect and componentDidMount run on client side.

3. Final Answer:

   getServerSideProps -> Option A

4. Quick Check:

   Server data fetch = getServerSideProps [OK]

Hint: Server data fetch uses getServerSideProps [OK]

Common Mistakes:

• Confusing getStaticProps with server-side fetching
• Using client hooks like useEffect for server data
• Thinking componentDidMount runs on server

3. Given this Next.js page code, what will the browser initially receive?

export async function getServerSideProps() {
  return { props: { message: 'Hello from server' } };
}

export default function Page({ message }) {
  return <h1>{message}</h1>;
}

medium

A. HTML with <h1>Hello from server</h1>

B. An empty page with no content

C. JavaScript code only, no HTML

D. A JSON object with the message

Solution

1. Step 1: Understand getServerSideProps role

   This function runs on the server and passes props to the component before rendering.

2. Step 2: Determine what is sent to browser

   The browser receives fully rendered HTML with the message inside an <h1> tag.

3. Final Answer:

   HTML with <h1>Hello from server</h1> -> Option A

4. Quick Check:

   Server props produce HTML output [OK]

Hint: Server props render HTML sent to browser first [OK]

Common Mistakes:

• Expecting raw JavaScript or JSON instead of HTML
• Thinking page is empty initially
• Confusing client-side rendering with server rendering

4. What is wrong with this Next.js page code?

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

medium

A. React components cannot use props

B. getServerSideProps cannot be async

C. Props cannot be passed to components

D. fetch returns a Response object, not JSON data

Solution

1. Step 1: Check fetch usage in getServerSideProps

   fetch returns a Response object; to get JSON, .json() must be called.

2. Step 2: Identify missing JSON parsing

   Without calling await data.json(), data is not the actual JSON, causing errors in rendering.

3. Final Answer:

   fetch returns a Response object, not JSON data -> Option D

4. Quick Check:

   fetch needs .json() to get data [OK]

Hint: Always parse fetch response with .json() in server props [OK]

Common Mistakes:

• Assuming fetch returns JSON directly
• Thinking getServerSideProps can't be async
• Believing props can't be passed to components

5. You want to render a page that shows a list of users fetched from an API on every request. Which Next.js approach correctly ensures the page is server-rendered with fresh data each time?

hard

A. Use getStaticProps to fetch users at build time

B. Use getServerSideProps to fetch users on each request

C. Fetch users inside useEffect in the component

D. Hardcode the user list in the component

Solution

1. Step 1: Understand data freshness needs

   Fetching fresh data on every request requires server-side fetching at request time.

2. Step 2: Match Next.js data fetching methods

   getServerSideProps runs on each request, while getStaticProps runs once at build time.

3. Step 3: Evaluate client-side fetching

   Fetching inside useEffect delays data until after page load, hurting SEO and initial render.

4. Final Answer:

   Use getServerSideProps to fetch users on each request -> Option B

5. Quick Check:

   Fresh server data = getServerSideProps [OK]

Hint: Fresh data each request? Use getServerSideProps [OK]

Common Mistakes:

• Using getStaticProps for dynamic data
• Fetching data only on client side
• Hardcoding data instead of fetching