Nested server side components on the server ?

[whole yew]

Are nested server side components that are wrapped by client components that use 'use client' components rendered on the server?

[rapid hornet]

Hi @whole yew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, nested server-side components that are wrapped by client components using the "use client" directive are rendered on the server. The rendering flow works as follows:

• On the server, React renders all Server Components before sending the result to the client.
  • This includes Server Components nested inside Client Components.
  • Client Components encountered during this stage are skipped.
• On the client, React renders Client Components and slots in the rendered result of Server Components, merging the work done on the server and client.

In Next.js, during the initial page load, both the rendered result of Server Components and Client Components are [pre-rendered on the server as HTML] to produce a faster initial page load.

Source: Next.js Documentation - Composing Client and Server Components (https://nextjs.org/docs/getting-started/react-essentials#composing-client-and-server-components)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@whole yew kapa.ai is still learning and improving, please let us how it did by reacting below