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.

Practice

1. Why are server components the default in Next.js?

easy

A. They allow direct access to browser events and state management.

B. They improve speed by running on the server and sending only HTML to the browser.

C. They require less server resources by running on the client.

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

Solution

1. Step 1: Understand server component behavior

   Server components run on the server and send only HTML to the browser, reducing data transfer and improving speed.

2. Step 2: Compare with client components

   Client components handle browser events and state, but server components focus on fast, secure rendering.

3. Final Answer:

   They improve speed by running on the server and sending only HTML to the browser. -> Option B

4. Quick Check:

   Server components = faster, secure HTML delivery [OK]

Hint: Server components send HTML, client components handle events [OK]

Common Mistakes:

• Confusing server components with client-side event handling
• Thinking server components run in the browser
• Assuming server components manage state like client components

2. Which of the following is the correct way to mark a component as a client component in Next.js?

easy

A. Use export default clientComponent() syntax.

B. Wrap the component in <ClientComponent> tags.

C. Add the directive use client at the top of the file.

D. Add client: true in the component props.

Solution

1. Step 1: Recall client component syntax

   In Next.js, to mark a component as client-side, you add the directive use client at the very top of the file.

2. Step 2: Eliminate incorrect options

   Wrapping in tags, special export syntax, or props flags are not valid ways to mark client components.

3. Final Answer:

   Add the directive use client at the top of the file. -> Option C

4. Quick Check:

   Client component directive = 'use client' [OK]

Hint: Client components start with 'use client' directive [OK]

Common Mistakes:

• Trying to mark client components with props or wrappers
• Placing 'use client' inside the component body
• Confusing export syntax with client directives

3. Consider this Next.js component code:

export default function Page() {
  return (
    <div>Hello from server component</div>
  )
}

What will the browser receive when this page loads?

medium

A. Plain HTML content: <div>Hello from server component</div>.

B. An error because no client directive is present.

C. A fully interactive React component with event handlers.

D. Empty content because server components do not render.

Solution

1. Step 1: Identify component type

   The component has no 'use client' directive, so it is a server component by default.

2. Step 2: Understand server component output

   Server components render HTML on the server and send plain HTML to the browser without React event handlers.

3. Final Answer:

   Plain HTML content: <div>Hello from server component</div>. -> Option A

4. Quick Check:

   Server component output = plain HTML [OK]

Hint: No 'use client' means server component sends HTML only [OK]

Common Mistakes:

• Expecting React interactivity without 'use client'
• Thinking server components cause errors without client directive
• Assuming server components send JavaScript to browser

4. You have this Next.js component:

export default function Button() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

What is the main problem with this code in Next.js 13+?

medium

A. Buttons cannot have event handlers in Next.js.

B. The useState hook is not imported from React.

C. The arrow function in onClick is invalid syntax.

D. It lacks the use client directive, so state and events won't work.

Solution

1. Step 1: Check component type and hooks usage

   The component uses React state and event handlers, which require client-side execution.

2. Step 2: Identify missing client directive

   Without the 'use client' directive at the top, this component is treated as a server component, so hooks and events won't work.

3. Final Answer:

   It lacks the use client directive, so state and events won't work. -> Option D

4. Quick Check:

   State + events need 'use client' directive [OK]

Hint: State or events require 'use client' directive [OK]

Common Mistakes:

• Forgetting to add 'use client' for interactive components
• Assuming hooks work in server components
• Thinking arrow functions cause syntax errors here

5. You want to build a Next.js page that fetches data securely on the server and shows a button that increments a counter on click. How should you organize your components?

hard

A. Use a server component for data fetching and embed a client component for the button with state.

B. Make the entire page a client component to handle data fetching and button state.

C. Use only server components because client components are slower.

D. Fetch data in the client component and handle button state in the server component.

Solution

1. Step 1: Separate concerns by component type

   Data fetching is best done in server components for security and speed, while interactive UI needs client components.

2. Step 2: Combine server and client components properly

   Use a server component to fetch and render data, then include a client component inside it for the button with state and events.

3. Final Answer:

   Use a server component for data fetching and embed a client component for the button with state. -> Option A

4. Quick Check:

   Server fetch + client interactivity = best practice [OK]

Hint: Fetch on server, interactive parts on client [OK]

Common Mistakes:

• Making entire page client-side losing server benefits
• Trying to fetch data inside client components
• Mixing state logic in server components