Why server components are the default in NextJS - Why It Works This Way

Overview - Why server components are the default

What is it?

Server components are parts of a web page that run on the server instead of the browser. They generate HTML on the server and send it to the browser, which then shows the page. This means less work for the browser and faster page loads. Next.js makes server components the default to improve performance and developer experience.

Why it matters

Without server components as the default, web pages would rely more on the browser to do heavy work, which can slow down loading and make the experience worse, especially on slow devices or networks. Server components help deliver faster, more efficient pages by doing the heavy lifting on the server, making websites feel quicker and smoother for users.

Where it fits

Before learning this, you should understand basic React components and how client-side rendering works. After this, you can explore advanced Next.js features like streaming, server actions, and client components to build interactive and fast web apps.

Mental Model

Core Idea

Server components run on the server to prepare the page before sending it to the browser, reducing browser work and speeding up loading.

Think of it like...

It's like a restaurant kitchen preparing your meal before you arrive, so when you sit down, the food is ready to eat instead of waiting for it to be cooked at your table.

┌───────────────┐       ┌───────────────┐
│ Server Code   │──────▶│ HTML Response │
│ (Server      )│       │ (Browser     )│
│ Components   │       │ Displays Page)│
└───────────────┘       └───────────────┘
       ▲                        ▲
       │                        │
       │                        │
┌───────────────┐       ┌───────────────┐
│ Client Code   │◀──────│ Browser       │
│ (Client      )│       │ (User Input)  │
│ Components   │       │               │
└───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

What are Server Components

Concept: Server components are React components that run only on the server and send HTML to the browser.

In Next.js, server components generate HTML on the server. They do not include JavaScript for the browser. This means the browser gets ready-to-show HTML, which loads faster and uses less memory.

Result

Pages load faster because the browser does less work rendering and running JavaScript.

Understanding that server components run on the server helps you see why they reduce browser load and improve performance.

2

Foundation

Difference Between Server and Client Components

Concept: Client components run in the browser and can handle user interactions, while server components run on the server and prepare static content.

Client components include JavaScript that runs in the browser, enabling interactivity. Server components do not include this JavaScript and only send HTML. Next.js lets you mix both types to balance speed and interactivity.

Result

You can build pages that load quickly with server components and add interactivity with client components.

Knowing the roles of server and client components helps you design efficient pages that load fast and remain interactive.

3

Intermediate

Why Server Components Are Default in Next.js

🤔Before reading on: do you think server components are default because they are easier to write or because they improve performance? Commit to your answer.

Concept: Next.js makes server components default to improve performance and reduce JavaScript sent to the browser.

By defaulting to server components, Next.js sends less JavaScript to the browser, which means faster page loads and better SEO. Developers only add client components when interactivity is needed, keeping pages lean.

Result

Websites built with Next.js load faster and use less device power by default.

Understanding the performance benefits explains why Next.js chooses server components as the default.

4

Intermediate

How Server Components Reduce JavaScript Bundle Size

🤔Before reading on: do you think server components send JavaScript to the browser or only HTML? Commit to your answer.

Concept: Server components do not send JavaScript to the browser, only HTML, which reduces the JavaScript bundle size.

When a component runs on the server, its code stays on the server. The browser receives only the HTML output. This means less JavaScript to download, parse, and run, which speeds up page load and reduces memory use.

Result

Smaller JavaScript bundles lead to faster page rendering and better user experience.

Knowing that server components keep JavaScript off the client helps you optimize app performance.

5

Intermediate

Mixing Server and Client Components

🤔Before reading on: do you think you can use server and client components together on the same page? Commit to your answer.

Concept: Next.js allows mixing server and client components to balance performance and interactivity.

You can build most of your page with server components for speed, then add client components where user interaction is needed. This hybrid approach gives the best of both worlds.

Result

Pages are fast but still interactive where necessary.

Understanding this mix helps you design efficient, user-friendly apps.

6

Advanced

Streaming Server Components for Faster Loading

🤔Before reading on: do you think server components send the whole page at once or can they stream parts progressively? Commit to your answer.

Concept: Next.js can stream server components progressively to the browser for faster perceived loading.

Instead of waiting for the whole page to be ready, Next.js streams server component HTML in chunks. The browser can start showing content earlier, improving user experience on slow networks.

Result

Users see page content faster, even if the full page is still loading.

Knowing about streaming reveals how server components improve real-world loading speed beyond just smaller bundles.

7

Expert

Server Components and Data Fetching Optimization

🤔Before reading on: do you think server components fetch data on the client or server? Commit to your answer.

Concept: Server components fetch data on the server during rendering, reducing client-side data fetching and improving security.

Since server components run on the server, they can fetch data directly from databases or APIs without exposing secrets to the browser. This reduces client requests and speeds up rendering.

Result

More secure and efficient data fetching with less client overhead.

Understanding server-side data fetching clarifies why server components improve security and performance in production apps.

Under the Hood

Server components run in a Node.js environment on the server. When a request comes in, Next.js renders these components to HTML strings. This HTML is sent to the browser without the JavaScript code for those components. Client components are bundled separately and hydrated in the browser for interactivity. The server and client communicate via a special protocol to coordinate rendering and hydration.

Why designed this way?

This design was chosen to reduce JavaScript sent to the client, improving load times and performance. Traditional client-side rendering sends all JavaScript to the browser, which can slow down devices and networks. Server components let developers write React code that runs on the server, leveraging server power and reducing client work. Alternatives like full client rendering or static HTML lacked flexibility or interactivity.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Client Request│──────▶│ Next.js Server│──────▶│ Server Rendered│
│               │       │ (Node.js)     │       │ HTML          │
└───────────────┘       └───────────────┘       └───────────────┘
                                │
                                ▼
                      ┌───────────────────┐
                      │ Client Components │
                      │ Bundled & Hydrated│
                      └───────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do server components send JavaScript to the browser? Commit to yes or no.

Common Belief: Server components send JavaScript to the browser just like client components.

Reality: Server components only send HTML to the browser, no JavaScript is sent for them.

Why it matters: Believing this leads to unnecessary JavaScript bundles and slower pages because developers might not optimize properly.

Quick: Can server components handle user clicks directly? Commit to yes or no.

Common Belief: Server components can handle user interactions like clicks and form inputs directly.

Reality: Server components cannot handle user interactions; client components are needed for interactivity.

Why it matters: Misunderstanding this causes broken or non-responsive UI if interactivity is expected from server components.

Quick: Are server components only useful for static pages? Commit to yes or no.

Common Belief: Server components are only useful for static content and cannot handle dynamic data.

Reality: Server components can fetch dynamic data on the server during each request, enabling dynamic pages with better performance.

Why it matters: Thinking server components are static-only limits their use and misses performance benefits for dynamic apps.

Quick: Do server components always make development more complex? Commit to yes or no.

Common Belief: Using server components makes development more complex and harder to debug.

Reality: Server components simplify development by reducing client-side complexity and improving performance, with clear separation of concerns.

Why it matters: Believing this may discourage developers from adopting server components and missing out on their benefits.

Expert Zone

1

Server components can access server-only resources like environment variables and databases securely, which client components cannot.

2

The boundary between server and client components affects bundle size and hydration cost, so careful design impacts performance significantly.

3

Streaming server components enable partial hydration and progressive rendering, which can improve perceived performance but require careful state management.

When NOT to use

Server components are not suitable when immediate client-side interactivity is required, such as animations or real-time updates. In those cases, client components or frameworks specialized for client rendering like React Client Components or frameworks like Remix may be better.

Production Patterns

In production, developers use server components for layout, data fetching, and static content, while client components handle forms, buttons, and interactive widgets. This separation optimizes load times and user experience. Streaming and incremental rendering are used to improve perceived performance on slow networks.

Connections

Progressive Web Apps (PWA)

Both aim to improve user experience by optimizing loading and responsiveness.

Understanding server components helps grasp how PWAs reduce load times by preloading content and minimizing client work.

Microservices Architecture

Server components separate concerns like microservices separate backend functions.

Knowing server components clarifies how modular design improves scalability and maintainability, similar to microservices.

Assembly Line Manufacturing

Server components prepare parts of the page in advance, like an assembly line prepares parts before final assembly.

This connection shows how pre-processing work improves efficiency and speed in both software and manufacturing.

Common Pitfalls

#1 Trying to add event handlers directly in server components.

Wrong approach:

export default function Page() {
return ;
}

Correct approach:

'use client';
export default function Button() {
return ;
}

Root cause:

Misunderstanding that server components cannot handle client-side events causes broken interactivity.

#2 Fetching data inside client components instead of server components unnecessarily.

Wrong approach:

'use client';
import { useEffect, useState } from 'react';
export default function Page() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data').then(res => res.json()).then(setData);
}, []);
return {data};
}

Correct approach:

export default async function Page() {
const res = await fetch('/api/data');
const data = await res.json();
return {data};
}

Root cause:

Not leveraging server components for data fetching leads to slower pages and more client work.

#3 Assuming all components should be server components by default.

Wrong approach:

export default function InteractiveWidget() {
return ;
}

Correct approach:

'use client';
export default function InteractiveWidget() {
return ;
}

Root cause:

Ignoring the need for client components for interactivity causes UI elements to be non-functional.

Key Takeaways

Server components run on the server and send HTML to the browser, reducing JavaScript load and improving performance.

Next.js makes server components the default to deliver faster, more efficient web pages by minimizing client-side work.

Client components handle interactivity and run in the browser, so mixing both types balances speed and user experience.

Server components can fetch data securely on the server, improving security and reducing client requests.

Understanding when and how to use server components helps build fast, scalable, and maintainable web applications.

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