Sign in
Skip to solution
hardFrontend

How do Server and Client Components compose in Next.js?

1.2k views
01

Understand the problem

Import rules and the children pattern.

nextjsrsccompositionclient-components
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

A Server Component can render a Client Component, but a Client Component cannot import a Server Component directly — instead you pass Server Components as children/props into Client Components. Props crossing the boundary must be serializable.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Server content inside a client shell
// client shell — doesn't know what children are
'use client';
export function Panel({ children }) {
  const [open, setOpen] = useState(true);
  return open ? <div>{children}</div> : <button onClick={() => setOpen(true)}>show</button>;
}

// server page passes a SERVER component as children (stays zero-JS)
export default async function Page() {
  return <Panel><ServerList items={await getItems()} /></Panel>;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 73 of 95 decoded in the Next.js track. One more won't hurt.

Back to track