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.