Q6: What does the 'use client' directive actually define?

The 'use client' directive defines a boundary between the Server Component tree and the Client Component tree. Declaring 'use client' at the top of a file marks that module and all of its imported dependencies as Client Components.

Passing Server Components as Children to Client Boundaries

// ClientModal.js
'use client';
export default function ClientModal({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  return isOpen ? <div className="modal">{children}</div> : null;
}

// Page.js (Server Component)
export default function Page() {
  return (
    <ClientModal>
      <ServerDataComponent /> {/* Remains a Server Component! */}
    </ClientModal>
  );
}

💡 Passing Server Components as children slots to Client Components keeps them rendered on the server.

Key Takeaways

'use client' establishes a module dependency boundary, not just a single-file flag.
Keep 'use client' boundaries as low down the component tree as possible to minimize JS bundle size.

Knowledge Check

How can you render a Server Component inside a Client Component wrapper without turning the Server Component into a client bundle item?

Q6: What does the 'use client' directive actually define?

STAY UPDATED WITH BYTES!