Server and client component composition in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark the component as a client component in Next.js.

NextJS

"use client";

export default function [1]() {
  return <button>Click me</button>;
}

Drag options to blanks, or click blank then click option'

AButtonClient

BClientButton

CButtonServer

DServerButton

Attempts:

3 left

💡 Hint

Common Mistakes

Not adding "use client" at the top of the file.

Using a server component name for a client component.

The component is marked as a client component by adding "use client" at the top. The function name can be any valid name, here ClientButton is used.

2fill in blank

medium

Complete the code to import a client component inside a server component in Next.js.

NextJS

import [1] from './ClientButton';

export default function ServerComponent() {
  return <div><[1] /></div>;
}

Drag options to blanks, or click blank then click option'

AClientButton

BServerButton

CButtonClient

DButtonServer

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a server component name instead of the client component.

Using a wrong component name in JSX.

Client components can be imported and used inside server components. The import name must match the exported client component name.

3fill in blank

hard

Fix the error in the client component by adding the missing directive.

NextJS

"use client";

export default function ClientComponent() {
  return <button>Click me</button>;
}

// Missing directive: [1]

Drag options to blanks, or click blank then click option'

A"use jsx"

B"use server"

C"use strict"

D"use client"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" instead of "use client".

Not adding any directive at all.

Client components in Next.js must start with the directive "use client" to enable client-side features like hooks and event handlers.

4fill in blank

hard

Fill both blanks to create a server component that renders a client component with a prop.

NextJS

import [1] from './[2]';

export default function ServerComp() {
  return <div><ClientComp message="Hello" /></div>;
}

Drag options to blanks, or click blank then click option'

AClientComp

BServerComp

CClientComponent

DServerComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing server and client component names.

Using wrong import names or file names.

The server component imports the client component named ClientComp from the file ClientComponent. Then it renders it with a prop.

5fill in blank

hard

Fill all three blanks to pass a callback from a server component to a client component.

NextJS

import [1] from './[2]';

export default function ServerParent() {
  function handleClick() {
    console.log('Clicked');
  }

  return <[3] onClick={handleClick} />;
}

Drag options to blanks, or click blank then click option'

AClientChild

BClientComponent

DServerParent

Attempts:

3 left

💡 Hint

Common Mistakes

Using server component names in place of client components.

Not matching import and JSX component names.

The server component imports the client component ClientComponent and passes a callback handleClick as a prop named onClick. The client component can then use this callback.

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