Zero bundle size for server components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Server Component rendering?

Consider this Next.js Server Component code. What will be rendered in the browser?

NextJS

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

A <h1>Hello from client!</h1>

B <h1>Hello from server!</h1>

C Error: Cannot render on server

D <div>Hello from server!</div>

💡 Hint

Server Components render HTML on the server and send it as static markup.

The component returns an

element with the server-side message. This renders as

Hello from server!

in the browser.

❓ state_output

intermediate

What happens if you use useState in a Server Component?

Given this Server Component code, what will happen when you try to run it?

NextJS

import { useState } from 'react';

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

A Runtime error: setCount is not a function

B The component renders a button with 0 and updates count on click

C SyntaxError: useState cannot be used in Server Components

D The component renders but count never updates on click

💡 Hint

Server Components do not support React hooks like useState.

useState is a React hook for client-side state. Server Components run only on the server and cannot use client hooks, causing a syntax or build error.

📝 Syntax

advanced

Which option correctly marks a component as a Server Component in Next.js?

Select the code snippet that correctly defines a Server Component with zero client bundle size.

A

import React from 'react';
export default function MyComponent() { return <p>Server</p>; }

B

"use client";
export default function MyComponent() { return <p>Client</p>; }

C

"use server";
export default function MyComponent() { return <p>Server</p>; }

D export default function MyComponent() { return <p>Server</p>; }

💡 Hint

Server Components do not need a special directive; client components use "use client".

In Next.js, components are Server Components by default. Adding "use client" marks them as Client Components. "use server" is not a valid directive.

🔧 Debug

advanced

Why does this Server Component cause a client bundle to be generated?

Analyze the code below. Why does it cause Next.js to include client-side JavaScript in the bundle?

NextJS

import { useState } from 'react';

export default function Example() {
  return <button onClick={() => alert('Clicked!')}>Click me</button>;
}

A Because it uses an event handler onClick, which requires client-side JavaScript

B Because alert is not allowed in Server Components

C Because it imports useState, which is client-only, triggering client bundle

D Because the component returns a button element

💡 Hint

Event handlers require client-side interactivity.

Using onClick requires the component to be interactive on the client, so Next.js bundles client JavaScript even if useState is not used.

🧠 Conceptual

expert

How does Next.js achieve zero bundle size for Server Components?

Choose the best explanation for how Next.js ensures Server Components have zero client bundle size.

A Next.js compiles Server Components to static HTML on the server and never sends their code to the client

B Next.js bundles Server Components with client code but disables their JavaScript execution on the client

C Next.js converts Server Components to client components at runtime to reduce bundle size

D Next.js uses a special runtime that runs Server Components inside the browser without bundling

💡 Hint

Think about where Server Components run and what is sent to the browser.

Server Components run only on the server and produce HTML. Their code is not sent to the client, so no JavaScript bundle is created for them.

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