hardFrontend

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

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

**TL;DR.** 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**. ✅ Server → Client import & render directly props serializable ⚠ Client needs Server pass as children/props</t

1.2k views

Understand the problem

Import rules and the children pattern.

nextjsrsccompositionclient-components

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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>;
}

Join the discussion

Discussion (0)

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

How do you migrate from the Pages Router to the App Router in Next.js?

What are React Server Components and why does Next.js use them?