Why server components are the default in NextJS - Visual Breakdown

Concept Flow - Why server components are the default

User requests page

↓

Server renders components

↓

Server Components fetch data

↓

Server sends HTML to browser

↓

Browser displays page

↓

Client Components hydrate if needed

↓

User interacts with page

The server handles rendering first, fetching data and building HTML, then sends it to the browser where client components activate if needed.

Execution Sample

NextJS

export default async function Page() {
  const data = await fetchDataFromServer();
  return <div>{data.message}</div>;
}

A server component fetches data and returns HTML to display on the page.

Execution Table

Step	Action	Component Type	Data Fetch	Output Sent	Browser Action
1	User requests page	N/A	N/A	N/A	N/A
2	Server starts rendering	Server Component	Fetch data from server	No output yet	N/A
3	Server completes rendering	Server Component	Data fetched	<div>Hello</div>	N/A
4	Server sends HTML	N/A	N/A	HTML sent to browser	Browser receives HTML
5	Browser displays HTML	N/A	N/A	HTML rendered visually	Page visible to user
6	Client Components hydrate	Client Component	N/A	N/A	Adds interactivity
7	User interacts	Client Component	N/A	N/A	Responds to user input
8	End	N/A	N/A	N/A	Page fully loaded and interactive

💡 Rendering ends after server sends HTML and client hydrates interactive parts

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
data	undefined	{ message: 'Hello' }	{ message: 'Hello' }	{ message: 'Hello' }	{ message: 'Hello' }
HTML	empty	empty	<div>Hello</div>	<div>Hello</div>	<div>Hello</div>
Browser State	empty	empty	empty	empty	Rendered and hydrated

Key Moments - 2 Insights

Why does the server fetch data before sending HTML?

Because server components run on the server, they can get data first and send ready HTML, as shown in steps 2 and 3 of the execution table.

What happens if a component needs interactivity?

Client components hydrate after the HTML arrives in the browser (step 6), adding interactivity without reloading the whole page.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the server send the HTML to the browser?

A Step 4

B Step 2

C Step 6

D Step 1

💡 Hint

Check the 'Output Sent' column in the execution table.

According to the variable tracker, what is the value of 'data' after step 3?

A undefined

B empty

C { message: 'Hello' }

D null

💡 Hint

Look at the 'data' row and the 'After Step 3' column in variable_tracker.

If the component was only client-side, which step would be missing from the execution table?

A Step 6 (Client Components hydrate)

B Step 2 (Server starts rendering)

C Step 4 (Server sends HTML)

D Step 5 (Browser displays HTML)

💡 Hint

Server rendering steps involve server components, check steps 2 and 3.

Concept Snapshot

Server Components run on the server by default.
They fetch data and render HTML before sending to the browser.
This reduces JavaScript sent to the client.
Client Components hydrate after HTML loads for interactivity.
This improves performance and user experience.

Full Transcript

When a user requests a page, the server renders server components first. These components fetch data directly on the server and build the HTML. The server then sends this HTML to the browser, which displays the page quickly. If parts of the page need interactivity, client components hydrate after the HTML loads, adding event handlers and dynamic behavior. This approach makes server components the default in Next.js because it improves speed and reduces the amount of JavaScript sent to the browser.