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.