The "use client" boundary

The directive does not mark one component as interactive — it marks the entry point to a client subtree. Everything imported below it goes to the browser too.

Lesson 2.210m 34sIntermediate14.5k students

Chapters

10:34
  1. 0:00Blunder #1
  2. 1:30Client vs Server Components
  3. 4:58When to refactor?
  4. 6:03Blunder #2
  5. 8:19Boundary
  6. 9:06Import twice

What this lesson covers

  • Place the directive at the boundary, not on every file
  • Push interactivity to the leaves to keep the bundle small
  • Spot the accidental import that drags the server tree client-side

This lesson sits in Server and Client Components, part of Next.js App Router in Depth. It assumes what came before it and leads directly into the next lesson in the module.

In this lesson you will

  • Place the directive at the boundary, not on every file
  • Push interactivity to the leaves to keep the bundle small
  • Spot the accidental import that drags the server tree client-side

Resources