When to use client components in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a client component in Next.js?

A client component is a React component that runs in the browser. It can use browser-only features like state, effects, and event handlers.

beginner

When should you use a client component in Next.js?

Use client components when you need interactivity, like handling user input, animations, or dynamic updates that happen in the browser.

intermediate

Why can't server components handle user events in Next.js?

Server components run on the server and do not have access to browser APIs or user events, so they can't handle clicks or input changes directly.

beginner

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

Add the directive 'use client' at the top of the component file to tell Next.js to treat it as a client component.

intermediate

Can client components use server components inside them in Next.js?

No, client components cannot include server components, but server components can include client components.

Which of the following is a reason to use a client component in Next.js?

A To fetch data from a database securely

B To handle user clicks and input

C To render static content faster

D To run code only on the server

Client components handle user interactions like clicks and input because they run in the browser.

How do you tell Next.js that a component should be a client component?

A Add 'use client' at the top of the file

B Add 'use server' at the top of the file

C Wrap the component in a special function

D Name the file with .client.js extension

The 'use client' directive at the top marks the component as a client component.

Which statement is true about client and server components?

A Server components can include client components

B Both run only on the server

C Client and server components cannot be mixed

D Client components can include server components

Server components can include client components, but client components cannot include server components.

What feature can only client components use in Next.js?

A Direct database queries

B Server-side data fetching

C Static site generation

D React hooks like useState and useEffect

Hooks like useState and useEffect require running in the browser, so only client components can use them.

If you want to add a button that changes text when clicked, which component type should you use?

A Server component

B Static component

C Client component

D API route

Client components handle user events like clicks, so use a client component for interactive buttons.

Explain why and when you should use client components in Next.js.

Think about what needs to happen in the browser versus on the server.

Describe the relationship between client and server components in Next.js and how they can be combined.

Consider which components can contain which and where they run.