Zero bundle size for server components in NextJS - Deep Dive

Overview - Zero bundle size for server components

What is it?

Zero bundle size for server components means that parts of a web page are rendered only on the server and do not add any extra code to the user's browser. This keeps the website fast and light because the browser only downloads what it needs to show. Server components run on the server, so they can access data and resources securely without sending extra code to the client. This approach helps build modern web apps that load quickly and work smoothly.

Why it matters

Without zero bundle size server components, web pages send all their code to the browser, even parts that only the server needs. This makes websites slower and heavier, especially on slow connections or devices. By keeping server-only code off the client, websites become faster, use less data, and feel more responsive. This improves user experience and saves bandwidth, which is important for real users around the world.

Where it fits

Before learning zero bundle size server components, you should understand basic React components and how client-side rendering works. After this, you can learn about Next.js App Router and server components in detail, then explore advanced data fetching and caching strategies that work with server components.

Mental Model

Core Idea

Server components run only on the server and do not add any code to the browser, making the client bundle size zero for those parts.

Think of it like...

It's like ordering a meal at a restaurant where the chef prepares the food in the kitchen (server), and you only get the finished dish at your table (browser) without seeing the cooking tools or ingredients.

┌───────────────┐       ┌───────────────┐
│ Server Code   │──────▶│ Server Renders │
│ (Server      │       │ Components    │
│ Components)  │       └───────────────┘
└───────────────┘               │
                                ▼
                      ┌───────────────────┐
                      │ Client Receives   │
                      │ Rendered Output   │
                      │ (No Server Code)  │
                      └───────────────────┘

Build-Up - 6 Steps

1

Foundation

What are Server Components

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

In Next.js, server components let you write UI that fetches data and renders HTML on the server. Unlike client components, they do not include JavaScript in the browser bundle. This means the browser only gets the final HTML and minimal JavaScript needed for interactivity.

Result

You get faster page loads because less JavaScript is sent to the browser.

Understanding that server components do not send code to the client is key to grasping how zero bundle size is achieved.

2

Foundation

Difference Between Server and Client Components

Concept: Client components run in the browser and include JavaScript code, while server components run on the server and send only HTML.

Client components handle user interactions and need JavaScript in the browser. Server components can fetch data securely and render UI without adding JavaScript to the client. Next.js lets you mix both types to optimize performance.

Result

You learn when to use server components to reduce client bundle size and when to use client components for interactivity.

Knowing the roles of server vs client components helps you design apps that balance speed and interactivity.

3

Intermediate

How Zero Bundle Size Works in Next.js

🤔Before reading on: do you think server components send any JavaScript code to the browser? Commit to yes or no.

Concept: Next.js automatically excludes server components from the client bundle, so their code never reaches the browser.

When you build a Next.js app with server components, the framework separates server-only code from client code. Server components render HTML on the server and send it to the browser. The browser never downloads the server component's JavaScript, resulting in zero bundle size for those parts.

Result

Your browser bundle is smaller, improving load times and reducing memory use.

Understanding this automatic separation explains why server components improve performance without extra developer effort.

4

Intermediate

Mixing Server and Client Components Safely

🤔Before reading on: can server components use browser-only features like event handlers? Commit to yes or no.

Concept: Server components cannot use browser-only features, so you must use client components for interactivity and events.

In Next.js, you mark client components with 'use client' at the top. Server components can include client components inside them, but not the other way around. This keeps server components free of client-side code, preserving zero bundle size.

Result

You can build interactive apps while keeping most code server-only and lightweight on the client.

Knowing this rule prevents bugs and helps maintain the performance benefits of zero bundle size.

5

Advanced

Data Fetching Without Client Bundle Impact

🤔Before reading on: do you think fetching data in server components adds JavaScript to the client? Commit to yes or no.

Concept: Server components fetch data on the server during rendering, so no data fetching code is sent to the client.

You can fetch data directly inside server components using async/await. This data is used to render HTML on the server. The client only receives the final HTML, not the fetching logic or data fetching libraries.

Result

Your client bundle stays small even with complex data fetching.

Understanding server-side data fetching explains how zero bundle size helps with both code size and security.

6

Expert

Surprising Limits and Edge Cases

🤔Before reading on: do you think all server components always have zero bundle size, no matter what? Commit to yes or no.

Concept: Some patterns can accidentally cause server components to include client code or increase bundle size if not careful.

If a server component imports a client component or uses browser-only APIs, Next.js will include client code in the bundle. Also, dynamic imports or certain libraries can increase bundle size. Developers must carefully separate concerns and follow Next.js rules to keep zero bundle size.

Result

You avoid unexpected bundle size increases and maintain app performance.

Knowing these edge cases helps you write truly zero bundle size server components and debug bundle issues.

Under the Hood

Next.js uses a compiler and bundler that analyze your code to separate server and client components. Server components are compiled to run only on the server, producing HTML output. The bundler excludes server component code from the client JavaScript bundle. Client components are bundled separately with their JavaScript. This separation happens at build time and runtime, ensuring server code never reaches the browser.

Why designed this way?

This design was created to solve the problem of heavy JavaScript bundles slowing down web apps. Traditional React apps send all code to the client, even code that only needs to run on the server. By splitting components by where they run, Next.js improves performance and security. Alternatives like full client rendering or server-side rendering without component separation were less efficient or more complex.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Source Code   │──────▶│ Compiler &    │──────▶│ Server Bundle │
│ (Server &    │       │ Bundler       │       │ (Server Only) │
│ Client Code) │       └───────────────┘       └───────────────┘
└───────────────┘               │                       │
                                │                       ▼
                                │               ┌───────────────┐
                                │               │ Client Bundle │
                                │               │ (Client Code) │
                                │               └───────────────┘
                                ▼
                      ┌───────────────────┐
                      │ Server Renders    │
                      │ Server Components │
                      └───────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: do you think server components can handle user clicks directly? Commit to yes or no.

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

Reality: Server components cannot handle user events because they run only on the server and do not have access to the browser environment.

Why it matters: Believing this causes bugs where interactivity does not work, frustrating users and developers.

Quick: do you think zero bundle size means no JavaScript runs on the client at all? Commit to yes or no.

Common Belief: Zero bundle size means the entire page has no JavaScript in the browser.

Reality: Zero bundle size applies only to server components; client components still send JavaScript to the browser for interactivity.

Why it matters: Misunderstanding this leads to confusion about why some JavaScript is still needed and how to balance server and client components.

Quick: do you think importing a client component inside a server component keeps zero bundle size? Commit to yes or no.

Common Belief: You can import client components inside server components without affecting bundle size.

Reality: Importing client components inside server components is allowed, but the client component's JavaScript is included in the client bundle, increasing bundle size.

Why it matters: Ignoring this can cause unexpected bundle size growth and slower page loads.

Quick: do you think server components can use browser APIs like window or document? Commit to yes or no.

Common Belief: Server components can safely use browser APIs because they run on the server.

Reality: Server components cannot use browser APIs because those APIs do not exist on the server environment.

Why it matters: Using browser APIs in server components causes runtime errors and broken pages.

Expert Zone

1

Server components can improve security by keeping sensitive logic and secrets on the server, never exposing them to the client.

2

The boundary between server and client components affects caching strategies and data freshness, requiring careful design for optimal performance.

3

Some third-party libraries are not compatible with server components because they rely on browser APIs, so choosing libraries carefully is crucial.

When NOT to use

Zero bundle size server components are not suitable when you need rich client-side interactivity or real-time updates. In those cases, use client components or frameworks specialized for client-side rendering like React with hydration or client-side state management.

Production Patterns

In production, developers use server components for static content, data fetching, and layout, while client components handle buttons, forms, and animations. This pattern reduces JavaScript sent to users and improves SEO and load times. Monitoring bundle size and profiling helps maintain zero bundle size benefits.

Connections

Microservices Architecture

Both separate concerns by location: microservices split backend logic into services, server components split UI logic by runtime environment.

Understanding separation of concerns in microservices helps grasp why splitting UI code by server/client improves maintainability and performance.

Lazy Loading in Web Development

Zero bundle size server components complement lazy loading by reducing initial JavaScript sent, similar to how lazy loading delays loading parts until needed.

Knowing lazy loading helps appreciate how zero bundle size reduces upfront load, improving user experience.

Cooking and Meal Delivery

Like a chef preparing meals in a kitchen and delivering only the finished dish, server components prepare UI on the server and send only HTML to the client.

This connection shows how offloading work to a central place (server) can simplify and speed up the final experience.

Common Pitfalls

#1 Trying to use browser-only APIs in server components.

Wrong approach:

export default function ServerComp() {
console.log(window.location.href);
return Hello;
}

Correct approach:

export default function ServerComp() {
// No browser APIs here
return Hello;
}

Root cause:

Misunderstanding that server components run on the server where browser APIs do not exist.

#2 Marking a component as server but importing client-only code inside it without 'use client'.

Wrong approach:

export default function ServerComp() {
const Button = require('./Button'); // Button uses 'use client'
return

Correct approach:

'use client';
import Button from './Button';
export default function ClientComp() {
return

Root cause:

Confusing component boundaries and not using 'use client' directive properly.

#3 Expecting zero bundle size means no JavaScript at all on the page.

Wrong approach:

Assuming all components can be server components and removing client components entirely.

Correct approach:

Use server components for static parts and client components for interactive parts, balancing zero bundle size with interactivity.

Root cause:

Misunderstanding that zero bundle size applies only to server components, not the entire app.

Key Takeaways

Zero bundle size server components run only on the server and do not send JavaScript code to the browser, improving performance.

Next.js automatically separates server and client components, allowing developers to build fast, scalable apps with minimal client bundle size.

Server components cannot handle user interactions or use browser APIs; client components are needed for interactivity.

Mixing server and client components carefully preserves zero bundle size benefits while enabling rich user experiences.

Understanding the limits and edge cases of server components helps avoid common bugs and unexpected bundle size increases.

Practice

1. What is the main benefit of using server components in Next.js with zero bundle size?

easy

A. They send no JavaScript to the browser, reducing bundle size and improving load speed.

B. They allow client-side interactivity without any server code.

C. They automatically cache data on the client for offline use.

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

Solution

1. Step 1: Understand server components behavior

   Server components run only on the server and do not send JavaScript to the browser.

2. Step 2: Identify the benefit of zero bundle size

   Because no JavaScript is sent, the bundle size is smaller, which improves page load speed.

3. Final Answer:

   They send no JavaScript to the browser, reducing bundle size and improving load speed. -> Option A

4. Quick Check:

   Zero bundle size = faster load [OK]

Hint: Server components send zero JS to browser, so bundle size shrinks [OK]

Common Mistakes:

• Thinking server components run on the client
• Assuming server components add client interactivity
• Confusing caching with zero bundle size

2. Which of the following is the correct way to declare a server component in Next.js to ensure zero bundle size?

easy

A. "use client"; export default function MyComponent() { return <div>Hello</div>; }

B. "use server"; export default function MyComponent() { return <div>Hello</div>; }

C. export default function MyComponent() { return <div>Hello</div>; }

D. import React from 'react'; export default function MyComponent() { return <div>Hello</div>; }

Solution

1. Step 1: Identify server component syntax

   By default, components without "use client" directive are server components in Next.js.

2. Step 2: Check the options for client/server directives

   export default function MyComponent() { return <div>Hello</div>; } has no "use client" directive, so it is a server component with zero bundle size.

3. Final Answer:

   export default function MyComponent() { return <div>Hello</div>; } -> Option C

4. Quick Check:

   No "use client" means server component [OK]

Hint: No "use client" means server component with zero bundle size [OK]

Common Mistakes:

• Adding "use client" which makes it a client component
• Using "use server" which is not a valid directive
• Assuming import React affects server/client distinction

3. Given this Next.js server component code, what will be sent to the browser?

export default function Greeting() {
  const message = 'Hello from server';
  return <h1>{message}</h1>;
}

medium

A. An HTML <h1> element with text 'Hello from server' and no JavaScript bundle.

B. An empty page because server components do not render anything.

C. An HTML <h1> element plus JavaScript to hydrate the component on the client.

D. A JavaScript bundle only, no HTML content.

Solution

1. Step 1: Understand server component rendering

   Server components render HTML on the server and send only HTML to the browser, no JS bundle.

2. Step 2: Analyze the code output

   The component returns an <h1> with the message string, so the browser receives that HTML.

3. Final Answer:

   An HTML <h1> element with text 'Hello from server' and no JavaScript bundle. -> Option A

4. Quick Check:

   Server component sends HTML only [OK]

Hint: Server components send HTML only, no JS bundle [OK]

Common Mistakes:

• Thinking server components send JS for hydration
• Assuming server components render nothing
• Confusing client components with server components

4. You wrote this server component in Next.js:

"use client";
export default function UserName() {
  const name = fetchUserName();
  return <div>{name}</div>;
}

What is the main issue here?

medium

A. Missing async keyword on the function causes fetchUserName() to fail.

B. Using "use client" makes it a client component, but fetchUserName() is a server-only function causing an error.

C. Server components cannot return JSX elements.

D. The component will work fine with zero bundle size.

Solution

1. Step 1: Identify component type from directive

   "use client" makes this a client component, so server-only functions like fetchUserName() cannot run here.

2. Step 2: Understand server-only function usage

   fetchUserName() likely fetches data on the server, so calling it in a client component causes an error.

3. Final Answer:

   Using "use client" makes it a client component, but fetchUserName() is a server-only function causing an error. -> Option B

4. Quick Check:

   Client component cannot call server-only functions [OK]

Hint: Client components cannot run server-only functions [OK]

Common Mistakes:

• Forgetting "use client" changes component type
• Assuming fetchUserName() works on client
• Thinking async keyword fixes server/client mismatch

5. You want to build a Next.js page that fetches user data from a database and displays it without sending any JavaScript to the browser. Which approach ensures zero bundle size for this page?

hard

A. Fetch data in getStaticProps and pass it to a client component.

B. Create a client component with "use client" that fetches data using useEffect and displays it.

C. Create a server component but add "use client" to enable interactivity.

D. Create a server component that fetches data inside and returns JSX, without "use client" directive.

Solution

1. Step 1: Identify zero bundle size requirement

   Zero bundle size means no JavaScript sent to browser, so no client components.

2. Step 2: Choose correct data fetching method

   Fetching data inside a server component without "use client" sends only HTML with data, no JS bundle.

3. Step 3: Evaluate other options

   Client components or getStaticProps with client components send JS bundles, so they don't meet zero bundle size.

4. Final Answer:

   Create a server component that fetches data inside and returns JSX, without "use client" directive. -> Option D

5. Quick Check:

   Server component + data fetch = zero bundle size [OK]

Hint: Use server component with data fetch, no "use client" [OK]

Common Mistakes:

• Adding "use client" which sends JS bundle
• Using client-side data fetching hooks
• Assuming getStaticProps alone ensures zero bundle size