Interleaving server and client in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js component render?

Consider this Next.js 14 component using server and client code interleaving. What will be the rendered output in the browser?

NextJS

import { cookies } from 'next/headers';

export default function Greeting() {
  const cookieStore = cookies();
  const user = cookieStore.get('user')?.value ?? 'Guest';

  return (
    <main>
      <h1>Hello, {user}!</h1>
      <ClientButton />
    </main>
  );
}

'use client';
import { useState } from 'react';

function ClientButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)} aria-label="Increment count">
      Clicked {count} times
    </button>
  );
}

A <main><h1>Hello, Guest!</h1><button>Clicked 0 times</button></main>

B <main><h1>Hello, undefined!</h1><button>Clicked 0 times</button></main>

C <main><h1>Hello, !</h1><button>Clicked 0 times</button></main>

D <main><h1>Hello, user!</h1><button>Clicked 0 times</button></main>

💡 Hint

Remember that cookies() runs on the server and returns cookie values if present, otherwise fallback is used.

The server component reads cookies on the server side. If no 'user' cookie is set, it defaults to 'Guest'. The client component renders a button with initial count 0.

❓ state_output

intermediate

What is the button label after clicking twice?

Given this Next.js client component inside a server component, what will the button label show after clicking it twice?

NextJS

'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)} aria-label="Increment">
      Clicked {count} times
    </button>
  );
}

A Clicked 1 times

B Clicked 2 times

C Clicked 0 times

D Clicked NaN times

💡 Hint

Each click increments the count state by 1.

The useState hook starts count at 0. Each click adds 1, so after two clicks, count is 2.

📝 Syntax

advanced

Which option correctly imports and uses a client component inside a server component?

In Next.js 14, you want to use a client component named inside a server component. Which code snippet is correct?

A

import ClientWidget from './ClientWidget';

export default function ServerComp() {
  'use client';
  return <ClientWidget />;
}

B

'use client';
import ClientWidget from './ClientWidget';

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

C

import ClientWidget from './ClientWidget';

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

// ClientWidget has 'use client' directive

D

import ClientWidget from './ClientWidget';

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

// ServerComp has 'use client' directive

💡 Hint

Server components do not have 'use client' directive. Client components must have it.

Server components can import client components without 'use client' directive themselves. The client component file must have 'use client'.

🔧 Debug

advanced

Why does this Next.js component cause a hydration error?

This Next.js component mixes server and client code. Why does it cause a hydration mismatch error in the browser? Code: import { cookies } from 'next/headers'; export default function Page() { const user = cookies().get('user')?.value ?? 'Guest'; return (

Welcome, {user}

); }

A The component is missing a React key prop on the button, causing hydration error.

B The cookies() call is invalid in server components, causing runtime error.

C The button element is missing an aria-label, causing hydration error.

D Using cookies() in a server component is fine, but the button with onClick requires 'use client' directive, causing mismatch.

💡 Hint

Client interactivity requires 'use client' directive on the component or a child component.

Server components cannot have event handlers like onClick directly. The button with onClick must be in a client component with 'use client' directive to avoid hydration mismatch.

🧠 Conceptual

expert

What is the main benefit of interleaving server and client components in Next.js 14?

Next.js 14 allows mixing server and client components in the same UI tree. What is the primary advantage of this approach?

A It enables faster page loads by rendering static parts on the server and interactive parts on the client efficiently.

B It forces all components to run on the client, improving interactivity at the cost of performance.

C It requires all components to be server components, simplifying deployment but reducing interactivity.

D It disables server-side rendering, making the app fully client-rendered for easier debugging.

💡 Hint

Think about balancing performance and interactivity in modern web apps.

Interleaving lets Next.js render static or data-heavy parts on the server for speed, while client components handle user interaction, giving best of both worlds.