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.

Practice

1. Which statement best describes a server component in Next.js?

easy

A. It runs in the browser and handles user interactions.

B. It is used only for styling components.

C. It renders on the server and cannot use browser-only APIs.

D. It requires client-side JavaScript to render.

Solution

1. Step 1: Understand server component behavior

   Server components render on the server and do not have access to browser APIs like window or document.

2. Step 2: Compare with client components

   Client components run in the browser and handle user interactions, unlike server components.

3. Final Answer:

   It renders on the server and cannot use browser-only APIs. -> Option C

4. Quick Check:

   Server component = renders on server [OK]

Hint: Server components run on server, no browser APIs [OK]

Common Mistakes:

• Confusing server components with client components
• Thinking server components handle user events
• Assuming server components require client JS

2. Which of the following is the correct way to mark a React component as a client component in Next.js?

easy

A. Use export default client() instead of export default.

B. Wrap the component with <ClientComponent> tag.

C. Import the component from next/client package.

D. Add the directive "use client" at the top of the file.

Solution

1. Step 1: Recall client component syntax

   In Next.js, to mark a component as client-side, you add the directive "use client" at the very top of the file.

2. Step 2: Evaluate other options

   Wrapping with a tag or importing from next/client is not valid syntax. Exporting with client() is not a Next.js pattern.

3. Final Answer:

   Add the directive "use client" at the top of the file. -> Option D

4. Quick Check:

   Client component = "use client" directive [OK]

Hint: Look for "use client" at file top to mark client component [OK]

Common Mistakes:

• Trying to wrap components with special tags
• Importing from non-existent packages
• Misusing export syntax for client components

3. Given the following code, what will be rendered on the page?

/* ServerComponent.jsx */
export default function ServerComponent() {
  return (
    

      
Server
      
    
  );
}

/* ClientComponent.jsx */
"use client";
export default function ClientComponent() {
  return Click me;
}

medium

A. Error: ClientComponent cannot be used inside ServerComponent

B. ServerClick me

C. Server

D. Click me

Solution

1. Step 1: Understand component composition

   The ServerComponent renders on the server and includes ClientComponent inside its JSX.

2. Step 2: Client component renders on client

   ClientComponent marked with "use client" runs in the browser and renders a button.

3. Final Answer:

   <div><h1>Server</h1><button>Click me</button></div> -> Option B

4. Quick Check:

   Server + Client components compose to render combined output [OK]

Hint: Server can include client components; client renders interactive parts [OK]

Common Mistakes:

• Thinking client components cannot be nested inside server components
• Expecting only server content to render
• Confusing error with valid composition

4. What is the main issue with this code snippet?

"use client";
export default function ServerComponent() {
  return 
Server content
;
}

medium

A. There is no issue; this code works fine.

B. Client components cannot be named ServerComponent.

C. The component is marked as client but named ServerComponent, causing confusion.

D. Server components cannot have "use client" directive; this causes a runtime error.

Solution

1. Step 1: Analyze the "use client" directive usage

   The directive "use client" marks the component as a client component, so it runs in the browser.

2. Step 2: Check component naming and behavior

   The name ServerComponent is misleading, but component names do not dictate behavior. The "use client" directive determines it is a client component. There are no syntax errors or runtime issues; the code is valid.

3. Final Answer:

   There is no issue; this code works fine. -> Option A

4. Quick Check:

   "use client" determines client behavior regardless of name [OK]

Hint: Directives like "use client" control behavior, not component names [OK]

Common Mistakes:

• Thinking "use client" causes runtime errors
• Believing component names enforce server/client type
• Assuming directive + server name = error

5. You want to build a Next.js page that fetches data on the server and displays it, but also includes a button that updates the UI on click. How should you compose your components?

hard

A. Create a server component to fetch and display data, then include a client component for the button inside it.

B. Make the entire page a client component to handle data fetching and button clicks.

C. Use only server components and handle button clicks with server-side events.

D. Fetch data in a client component and render the button in a server component.

Solution

1. Step 1: Separate data fetching and interactivity

   Data fetching is best done in server components for performance and security.

2. Step 2: Use client component for UI interaction

   The button requires client-side interactivity, so it should be a client component nested inside the server component.

3. Final Answer:

   Create a server component to fetch and display data, then include a client component for the button inside it. -> Option A

4. Quick Check:

   Server fetch + client button = best practice [OK]

Hint: Fetch on server, interactive parts on client components [OK]

Common Mistakes:

• Making entire page client component losing server benefits
• Trying to handle clicks only on server
• Fetching data inside client component unnecessarily