Client Shell, Server Children: the Slot Pattern
medium⏱ 20 minreactlesson
A reading view where a tiny client shell (a theme toggle) swallowed the entire server-rendered article: the shell imports and renders ArticleBody itself, and in RSC any module imported from a client module becomes client code too. Result: a heavy, static article ships to the browser and re-renders on every theme toggle.
Your tasks:
- TODO(A) — Open a slot in the shell:
ThemePanel accepts { children } and renders it inside the themed frame instead of rendering the article itself.
- TODO(B) — Repoint the import edge: the
ArticleBody pseudo-import moves out of the shell and into the page — server importing server keeps the article off the client bundle.
- TODO(C) — Compose in the page:
<ThemePanel><ArticleBody /></ThemePanel> — client shell outside, server children inside.
This is the children-slot pattern, the standard answer to "how does a client component display server content?": a Client Component cannot import a Server Component, but it can receive already-rendered server JSX through a prop and pass it through untouched.
Why this happens
The client boundary spreads through imports, not through JSX nesting — that asymmetry is the whole lesson. When a client module imports a component, that component must become client code, because the browser will need to re-execute it whenever the shell re-renders. But JSX passed as a prop is different: the server renders <ArticleBody /> first, and the client shell receives its already-serialized output — an opaque value it can position but never re-execute. That's also why toggling the theme re-runs only ThemePanel: children is the same prop value across those re-renders, so React doesn't even reconcile into the article subtree, let alone ship it as JavaScript. The pattern generalizes to every provider-shaped client component — theme providers, context providers, animation wrappers, interactive layouts: make them accept children, keep the import edges server → server, and the client bundle stays a thin interactive shell around server HTML.