Server and client component composition in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Server Component in Next.js?

A Server Component runs only on the server. It can fetch data securely and render HTML before sending it to the browser. It does not include client-side JavaScript by default.

beginner

What is a Client Component in Next.js?

A Client Component runs in the browser. It can use React hooks like useState and handle user interactions. It includes JavaScript sent to the client.

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. This tells Next.js to bundle it for the browser.

intermediate

Why compose Server and Client Components together?

Composing them lets you fetch data and render static parts on the server, while interactive parts run on the client. This improves performance and user experience.

intermediate

Can a Server Component import a Client Component in Next.js?

Yes, a Server Component can import and render a Client Component. But a Client Component cannot import a Server Component.

Which directive marks a component as a Client Component in Next.js?

A 'server only'

B 'use server'

C 'client only'

D 'use client'

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

Where does a Server Component run?

A Both server and browser

B In the browser

C On the server

D Only during build time

Server Components run only on the server and send rendered HTML to the browser.

Which of these can a Client Component do that a Server Component cannot?

A Use React hooks like useState

B Render HTML

C Fetch data securely

D Run without JavaScript

Client Components can use React hooks like useState to handle user interactions.

Can a Client Component import a Server Component?

A Yes, always

B No, never

C Only if marked with 'use client'

D Only in development mode

Client Components cannot import Server Components because Server Components run only on the server.

What is a benefit of composing Server and Client Components?

A Better SEO and interactivity

B Faster server startup

C No JavaScript sent to client

D Simpler code without imports

Composing Server and Client Components improves SEO by server rendering and adds interactivity with client-side code.

Explain how Server and Client Components work together in Next.js and why this composition is useful.

Think about where code runs and what each component type can do.

Describe how to create a Client Component in Next.js and what special directive is needed.

Focus on the special string at the top of the file.