CodePark/ questions / Server & Client Components
START PRACTICINGPRACTICE
Frontend question · Next.js › Server & Client Components

Can a Client Component render a Server Component? Explain the children pattern.

// Modal.tsx
"use client";
export function Modal({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return open ? <dialog open>{children}</dialog> : (
    <button onClick={() => setOpen(true)}>Open</button>
  );
}

// page.tsx (Server Component)
export default function Page() {
  return <Modal><CartSummary /></Modal>; // CartSummary stays on the server
}

No, a Client Component cannot import a Server Component. But it can receive one as a prop, most often as children.

Why no import? Anything a client file imports becomes client code. So the imported "Server Component" would turn into a Client Component.

The children pattern works like this:

  • A Server Component parent renders both pieces.
  • It passes the server-rendered element into the client wrapper as children.
  • React renders the Server Component on the server first.
  • React sends the result in the RSC payload (the compact description of the rendered Server Component tree that the server sends to the browser).
  • The Client Component only places that result in a slot.

The client wrapper never needs to know how the content was made. Think of the wrapper as a picture frame: it adds behaviour around the picture but never paints it.

Use this to wrap server content in interactive shells, such as modals, tabs, accordions or context providers. Data fetching and heavy code stay on the server.

  • Importing a Server Component into a client file turns it into client code.
  • Pass Server Components to a Client Component as children or other props instead.
  • The server renders the slot content first and sends the result to the browser.
  • Use this pattern for modals, tabs, providers and other interactive wrappers.