LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2315 min read

The "use client" Directive

Understand exactly what "use client" marks as a boundary, and how the module graph splits between server and client.

It Marks a Boundary, Not a Component

"use client" doesn't mark one component as special — it marks the module (the file) as the boundary between the server-only module graph and the client module graph. Every component that file imports and renders is now part of the client bundle too, unless that import is passed in as a prop from further up.

Server Component (page.tsx)
   └── imports → Client Component (Form.tsx, "use client")
                     └── imports → Input.tsx   ← also bundled for the client
                     └── imports → Button.tsx  ← also bundled for the client

Passing Server Components as children

A Client Component can still render a Server Component — but only if the Server Component is passed in as a prop (commonly children) from a parent Server Component, rather than imported directly inside the Client Component's own file.

// app/page.tsx — Server Component
import ClientCard from './ClientCard';
import ServerStats from './ServerStats'; // stays a Server Component


export default function Page() {
  return (
    <ClientCard>
      <ServerStats />
    </ClientCard>
  );
}
// ClientCard.tsx
'use client';


export default function ClientCard({ children }) {
  return <div className="card">{children}</div>;
}
Why This Works

ServerStats is rendered by the Server Component (page.tsx) and passed to ClientCard as already-rendered output — ClientCard never needs to import or execute its code, so it never becomes part of the client bundle.

Props Must Be Serializable

Because data crosses from the server to the client across a network-like boundary, props passed from a Server Component into a Client Component must be serializable — plain objects, arrays, strings, numbers, booleans. You cannot pass functions, class instances, or Dates without special handling.

Can PassCannot Pass
Strings, numbers, booleansFunctions (except Server Actions)
Plain objects and arraysClass instances
Rendered React elements (as children)Symbols, Maps, Sets (without conversion)

Common Beginner Mistakes

Passing an onClick function from a Server Component as a prop

Server Components can't define client-side event handlers to pass down — that logic has to originate inside a Client Component (or be a Server Action, covered later).

Assuming "use client" needs to be on every file in a folder

It only needs to be at the top of the entry file that starts the client boundary — files it imports don't need their own "use client" to be included in that boundary.

FAQs

No — Client Components are still rendered to HTML on the server for the first load; "use client" only means their JavaScript also ships to the browser.

It keeps server-only code (secrets, database clients) from accidentally being bundled and exposed to the browser, while still allowing rich composition between the two worlds.

Summary

The "use client" directive splits your module graph at the file where it's declared, and props crossing that boundary must be plain, serializable data. Next, you'll build on this with concrete composition patterns for mixing Server and Client Components well.

Next Lesson →

Composition Patterns