Server and client component composition in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js component render?

Consider this Next.js component structure using server and client components. What will be the rendered output in the browser?

NextJS

import ClientButton from './ClientButton';

export default function ServerComponent() {
  return (
    <main>
      <h1>Welcome</h1>
      <ClientButton />
    </main>
  );
}

// ClientButton.jsx
'use client';
import { useState } from 'react';

export default function ClientButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

A <main><h1>Welcome</h1><button>Clicked 0 times</button></main>

B <main><h1>Welcome</h1><button>Clicked undefined times</button></main>

C Error: Client components cannot be rendered inside server components

D <main><h1>Welcome</h1></main>

💡 Hint

Remember that client components can be used inside server components in Next.js 14+.

The server component renders the static parts and includes the client component. The client component initializes state to 0, so the button shows "Clicked 0 times" initially.

❓ lifecycle

intermediate

When does the client component's state initialize in this Next.js setup?

Given a server component rendering a client component with useState, when does the client component's state initialize?

NextJS

export default function ServerComp() {
  return <ClientComp />;
}

// ClientComp.jsx
'use client';
import { useState } from 'react';

export default function ClientComp() {
  const [value, setValue] = useState(5);
  return <div>{value}</div>;
}

A During server rendering on the server

B When the client component is hydrated in the browser

C Immediately when the server component renders

D Only after a user interaction triggers state initialization

💡 Hint

Think about where React hooks like useState run in Next.js server/client components.

Client components run in the browser. Their state initializes during hydration on the client, not on the server.

📝 Syntax

advanced

Which option correctly marks a client component in Next.js 14+?

Choose the correct way to declare a client component in Next.js 14+.

A 'use client';\nconst MyComponent = () => <div>Hello</div>; export default MyComponent;

B export default function MyComponent() { 'use client'; return <div>Hello</div>; }

C export default function MyComponent() { return <div>'use client'; Hello</div>; }

D 'use client';\nexport default function MyComponent() { return <div>Hello</div>; }

💡 Hint

The 'use client' directive must be the first line in the file.

The 'use client' directive must be at the top of the file before any imports or code to mark the file as a client component.

🔧 Debug

advanced

Why does this Next.js app crash with 'useState is not defined' error?

Examine the client component code below. Why does it crash with 'useState is not defined'?

NextJS

'use client';

export default function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count}</button>;
}

A useState is not imported from 'react'

B The component must be a class component to use useState

C useState cannot be used in client components

D The 'use client' directive is missing

💡 Hint

Check if all React hooks are properly imported.

React hooks like useState must be imported explicitly from 'react'. Missing import causes ReferenceError.

🧠 Conceptual

expert

What is the main reason to split components into server and client in Next.js 14+?

Why does Next.js 14+ encourage separating components into server and client types?

A To prevent any JavaScript from running on the client

B To force all components to use React hooks

C To optimize performance by rendering static parts on the server and interactive parts on the client

D To make all components render only on the client for faster updates

💡 Hint

Think about how server and client components affect loading speed and interactivity.

Server components render static content on the server, reducing client JavaScript. Client components handle interactivity. This split improves performance and user experience.

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