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.