Chapter
02a · Client Boundaries & Islands
Import contagion, islands of interactivity, and keeping client scope minimal in the RSC tree.
Import Contagion
- Any component imported into a
"use client"file also becomes client-side — the directive propagates down the import tree. - This is the single most common cause of oversized client bundles. A "use client" in a layout file infects everything below it.
- Rule: place
"use client"as deep as possible — on the leaf interactive component, not the container.
Islands of Interactivity
- The RSC model excels at this: make only the interactive piece a client component, keep everything else as a server component.
- Pattern: Server wrapper (fetch + layout) → Client island (buttons, forms, toggles) → Server children (static content).
- Pass data as props or promises — never fetch on the client when the server can do it.
use() on the Client
use(promise)(React 19) unwraps a server-passed promise inside a client component, triggering Suspense.- This replaces the "fetch on mount + useState" pattern for initial data that originated on the server.
- Only works with promises created on the server and passed as props — not promises created on the client.
Quick Rules
"use client"as deep as possible — never in layouts.- Client components are interactive islands; everything else is server-rendered.
- Pass server-resolved promises via
use()instead of re-fetching on the client. - Entity truth never comes from client state; it comes from server actions + revalidation.