In the NextJS docs, it says here that all child ponents and modules imported into a client ponent are considered part of the client bundle. However the docs also say that you can interleave server/client ponents by passing a server ponent as children props to a client ponent in order render the server ponent on the server e.g.

<ClientComponent>
   <ServerComponent/>
</ClientComponent>

I don't understand the difference between these statements or what the verdict exactly is, since these two parts seem to contradict each other. Am I misinterpeting some terminology? Are a client ponent's children part of the client bundle or are they rendered on the server?

In the NextJS docs, it says here that all child ponents and modules imported into a client ponent are considered part of the client bundle. However the docs also say that you can interleave server/client ponents by passing a server ponent as children props to a client ponent in order render the server ponent on the server e.g.

<ClientComponent>
   <ServerComponent/>
</ClientComponent>

I don't understand the difference between these statements or what the verdict exactly is, since these two parts seem to contradict each other. Am I misinterpeting some terminology? Are a client ponent's children part of the client bundle or are they rendered on the server?

• javascript
• reactjs
• typescript
• next.js
• rendering

• 1 To be sure you can add a console.log and see where it logs, on server or browser – Frederic Henri Commented Jul 4, 2024 at 14:35

1 Answer 1

Since it's passed as prop (children specifically) to ClientComponent, ServerComponent will not be part of the client bundle. To be sure, try to use useState in ServerComponent without adding "use client" at the top.

When they say "by defining a "use client" in a file, all other modules imported into it, including child ponents, are considered part of the client bundle", they are talking about modules that you import at the top and use in the ponent body. Not things that are passed as props.

They talked about it on this part of the doc:

The following pattern is supported. You can pass Server Components as a prop to a Client Component.

A mon pattern is to use the React children prop to create a "slot" in your Client Component.

In the example below, <ClientComponent> accepts a children prop:

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

<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.

In a parent Server Component, you can import both the <ClientComponent> and <ServerComponent> and pass <ServerComponent> as a child of <ClientComponent>:

// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
import ClientComponent from './client-ponent'
import ServerComponent from './server-ponent'
 
// Pages in Next.js are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}