Zero bundle size for server components in NextJS - Step-by-Step Execution

Concept Flow - Zero bundle size for server components

Write Server Component

↓

Next.js detects server component

↓

Exclude from client bundle

↓

Render on server only

↓

Send HTML to client

↓

Client receives no JS for server component

↓

Client renders HTML directly

This flow shows how Next.js handles server components by keeping their code only on the server, sending just HTML to the client, so no JavaScript bundle is sent for them.

Execution Sample

NextJS

export default function ServerComp() {
  return <h1>Hello from Server Component</h1>;
}

A simple server component that renders a heading, which Next.js renders on the server and sends only HTML to the client.

Execution Table

Step	Action	Evaluation	Result
1	Next.js reads ServerComp code	Detects export default function	Marks as server component
2	Build process	Exclude ServerComp from client bundle	No JS for ServerComp in client
3	Server renders ServerComp	Executes function	<h1>Hello from Server Component</h1> HTML generated
4	Send response to client	Includes only HTML	Client receives HTML, no JS for ServerComp
5	Client renders page	Uses received HTML	Displays heading without loading JS
6	End	No client JS for ServerComp	Zero bundle size achieved

💡 Server component code is never sent to client, so bundle size for it is zero.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
ServerComp code	Function code	Executed on server	Not sent to client	Not present on client
HTML output	None	<h1>Hello from Server Component</h1>	Sent to client	Rendered on client

Key Moments - 2 Insights

Why doesn't the client receive any JavaScript code for the server component?

Because Next.js excludes server components from the client bundle during build (see execution_table step 2), so only HTML is sent to the client.

How does the client show the server component content without JavaScript?

The server renders the component to HTML (step 3), sends it to the client (step 4), and the client displays this HTML directly (step 5) without needing JS.

Visual Quiz - 3 Questions

Look at the execution table, at which step does Next.js exclude the server component from the client bundle?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Action' and 'Result' columns in step 2 about excluding from client bundle.

According to the variable tracker, what happens to the ServerComp code after step 4?

A It is sent to the client

B It is executed on the client

C It is not present on the client

D It is converted to JavaScript for the client

💡 Hint

Look at the 'ServerComp code' row in variable_tracker after step 4.

If the server component returned a complex UI, how would that affect the client bundle size?

A Client bundle size increases with UI complexity

B Client bundle size stays zero regardless

C Client bundle size depends on client components only

D Client bundle size depends on server load

💡 Hint

Refer to the exit_note and execution_table step 6 about zero bundle size.

Concept Snapshot

Zero bundle size for server components in Next.js means:
- Server components run only on the server
- Their code is excluded from client bundles
- Server renders HTML sent to client
- Client shows HTML without loading JS
- This reduces client bundle size and improves performance

Full Transcript

In Next.js, server components are special components that run only on the server. When you write a server component, Next.js detects it during build and excludes its code from the JavaScript sent to the browser. Instead, the server runs the component code, generates HTML, and sends that HTML to the client. The client then displays this HTML directly without needing any JavaScript for that component. This process means the client bundle size for server components is zero, improving load speed and performance. The execution table shows each step: reading the component, excluding it from the client bundle, rendering HTML on the server, sending HTML to the client, and rendering it in the browser. The variable tracker confirms the server component code never reaches the client, only the HTML does. This approach helps keep client bundles small even if server components are complex.

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