Why this lesson matters

Understand client components and use it correctly in an App Router project. Server Components keep data access and secrets on the server; Client Components exist where browser state, events or APIs are required. The boundary determines bundle size and data exposure.

How to reason about it

  • For Client Components, the outcome to verify is: Place use client at the smallest interactive boundary instead of converting the whole page.
  • In Client Components, keep this failure controlled: Adding use client at a high-level layout turns large subtrees into client code and can tempt developers to move server-only concerns into the browser.
  • Client Components practice target: Render data in a Server Component and pass only a serializable identifier into a small interactive Client Component.

Practical walkthrough

In the Client Components walkthrough: Place use client at the smallest interactive boundary instead of converting the whole page.

counter.tsxtsx
'use client';
import { useState } from 'react';

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

Practice it yourself

Practice

Client Components exercise

Render data in a Server Component and pass only a serializable identifier into a small interactive Client Component.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary