How to render a server component in the client component?

Q: How to render a server component in the client component?

'use client' import { useState } from 'react' export default function ClientComponent({ children,}: { children: React.ReactNode}) { const [count, setCount] = useState(0) return ( <> setCount(count + 1)}>{count} {children} ) }

Difficulty: 5/10

Server Components, Client Components, Data Fetching

You can pass Server Components as a prop to a Client Component. A common pattern is to use the React children prop.

<ClientComponent> doesn't know that children will eventually be filled in by the result of a Server Component. The only responsibility <ClientComponent> has is to decide where children will eventually be placed.

Scenario Questions

0-2 years experience

1You have a Next.js page that needs to display a list of products fetched from a database. How would you structure the components if the list rendering should be a server component but you need a button inside each item that toggles a UI state on the client?
2If you import a server component directly into a client component file, what error will you see, and how do you fix it?
3Walk me through the steps to render a server component inside a client component using JSX.

Follow-up Questions

What happens if you try to use a client‑only hook inside that server component?
How does this pattern affect bundle size and initial load performance?
Can you describe how Next.js streams the server component’s HTML to the client?