Zero bundle size for server components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark a component as a server component in Next.js.

NextJS

"use client" directive is for client components, so for server components, [1] at the top.

Drag options to blanks, or click blank then click option'

Ano directive (default)

B"use server"

C"server component"

D"client component"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" (that's for Server Actions)

Using "use client" which bundles to client

In Next.js App Router, components are server components by default with no directive. This ensures zero bundle size on the client as they render entirely on the server. "use server" is reserved for Server Actions.

2fill in blank

medium

Complete the code to import a server component correctly without increasing client bundle size.

NextJS

import ServerComponent from '[1]';

Drag options to blanks, or click blank then click option'

A./ServerComponent.server

B./ServerComponent.client

C./ServerComponent

Dnext/server

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from a .client file which increases bundle size

Using a generic import without suffix causing confusion

A common convention is to use the .server file suffix for server-only components. This clarifies intent and helps avoid accidental client bundling, contributing to zero client bundle size.

3fill in blank

hard

Fix the error in this server component export to ensure zero client bundle size.

NextJS

export default function [1]() { return <div>Server Component</div>; }

Drag options to blanks, or click blank then click option'

AClientComponent

BuseServerComponent

CuseClientComponent

DServerComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the component as a client component causing confusion

Adding "use client" directive

Naming the function ServerComponent clarifies its role as a server component. Ensure no "use client" directive is present in the file for zero client bundle size.

4fill in blank

hard

Fill both blanks to create a server component that fetches data without adding to client bundle size.

NextJS

export default async function [1]() {
  const data = await fetch('[2]');
  return <div>{JSON.stringify(data)}</div>;
}

Drag options to blanks, or click blank then click option'

AServerDataComponent

Bhttps://api.example.com/data

Chttps://client.api.com/data

DClientDataComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using client component names

Fetching from client-side only URLs

The component is named ServerDataComponent (server by default) and fetches data from a server API URL on the server side. No client bundle increase since it runs server-only.

5fill in blank

hard

Fill all three blanks to create a server component that imports a client component and passes data correctly.

NextJS

import ClientComponent from [1];

export default async function [2]() {
  const data = await fetch('[3]');
  return <ClientComponent data={data} />;
}

Drag options to blanks, or click blank then click option'

A"./ClientComponent.client"

BServerWithClient

Chttps://api.example.com/info

D"./ClientComponent.server"

Attempts:

3 left

💡 Hint

Common Mistakes

Importing client component from a server file suffix

Using wrong component names

Fetching from incorrect URLs

The server component (default) imports the client component from a .client file (convention), fetches serializable data on the server from an API, and passes it as props to the client component. Keeps client bundle minimal.