Client component boundaries in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a client component boundary in Next.js?

A client component boundary is a place in your app where you switch from server-rendered components to client-rendered components. It marks where React starts running in the browser.

beginner

How do you mark a component as a client component in Next.js?

You add the directive 'use client' at the top of the component file. This tells Next.js to render it on the client side.

intermediate

Why should you limit client component boundaries in Next.js?

Limiting client boundaries helps keep your app fast by rendering most parts on the server and only running JavaScript in the browser where needed.

intermediate

Can a server component import a client component in Next.js?

Yes, a server component can import a client component, but not the other way around. This creates a boundary where client code starts.

beginner

What happens if you forget to add 'use client' in a component that uses browser-only features?

The component will fail because server components can’t use browser APIs like window or document. You must mark it as a client component.

What directive marks a component as a client component in Next.js?

A 'use client'

B 'use server'

C 'client only'

D 'render client'

The directive 'use client' at the top of a file tells Next.js to treat the component as a client component.

Which component can import the other in Next.js?

A Server component can import client component

B Neither can import the other

C Both can import each other freely

D Client component can import server component

Server components can import client components to create boundaries, but client components cannot import server components.

Why limit client component boundaries in Next.js?

A To reduce server load

B To make components bigger

C To avoid using React

D To improve browser performance by reducing JavaScript

Limiting client boundaries reduces JavaScript sent to the browser, improving performance.

What happens if a server component tries to use window without 'use client'?

A It works fine

B It causes an error because window is not available on the server

C It runs slower

D It automatically becomes a client component

Server components run on the server where window does not exist, so using it causes errors.

Where does React start running when crossing a client component boundary?

A In the database

B On the server

C In the browser

D In the build process

Client component boundaries mark where React switches to running in the browser.

Explain what a client component boundary is and why it matters in Next.js.

Think about where React code runs and why we want to control that.

Describe the rules for importing between server and client components in Next.js.

Consider which side can use browser features and which cannot.