Zero bundle size for server components in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does "Zero bundle size for server components" mean in Next.js?

It means server components do not add any JavaScript to the client bundle. They run only on the server, so the client downloads less code, making the app faster.

beginner

Why do server components have zero bundle size on the client?

Because server components render HTML on the server and send it to the client without sending their JavaScript code, so no client-side JavaScript is needed for them.

intermediate

How does zero bundle size for server components improve user experience?

It reduces the amount of JavaScript the browser downloads and runs, leading to faster page loads and less CPU work on the user's device.

intermediate

Can server components use client-side hooks like useState or useEffect?

No, server components cannot use client-side hooks because they run only on the server and do not have access to browser APIs or client state.

advanced

What happens if you import a client component inside a server component in Next.js?

The client component and its JavaScript will be bundled and sent to the client, but the server component itself remains zero bundle size.

What is the main benefit of zero bundle size for server components?

A Makes the server components run on the client

B Allows using client-side hooks on the server

C Enables offline support automatically

D Faster page loads by sending less JavaScript to the client

Zero bundle size means no JavaScript for server components is sent to the client, reducing load time.

Where do server components run in Next.js?

A Both server and client

B Only on the server

C Only on the client

D In the browser's service worker

Server components run only on the server and send rendered HTML to the client.

Which hook is NOT allowed in server components?

A useState

B useMemo

C useCallback

D useServerAction

useState is a client-side hook and cannot be used in server components.

If a server component imports a client component, what happens?

A Client component code is bundled and sent to the client

B Client component code stays on the server

C Server component loses zero bundle size

D The app crashes

Client components are bundled for the client even if imported by server components.

Zero bundle size helps improve which of the following?

A Server CPU usage

B Database query speed

C JavaScript bundle size on the client

D CSS styling

Zero bundle size means less JavaScript sent to the client, improving bundle size.

Explain how zero bundle size for server components works and why it matters for web performance.

Think about what code the browser downloads and runs.

Describe the difference between server components and client components in Next.js regarding bundling and execution.

Focus on where the code runs and what is sent to the browser.