Docs: where are client components rendered?

[gmoniava]

What is the improvement or update you wish to see?

I am somewhat confused about one part in Nextjs docs.

At one place it says:

Client Components enable you to add client-side interactivity to your
application. In Next.js, they are pre-rendered on the server and
hydrated on the client

Then a little bit below it it says:

Components in the Client Component module graph are primarily rendered
on the client, but with Next.js, they can also be pre-rendered on the
server and hydrated on the client.

It seems the first quote is suggesting in Nextjs client components are always pre-rendered on the server and hydrated on the client, while the second one says they might be pre-rendered on the server and hydrated on the client (notice the bold text use of word "can" in the second quote).

Can someone clear up this confusion in the docs?

Is there any context that might help us understand?

N/a

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/getting-started/react-essentials#client-components

[delbaoliveira]

Hey @gmoniava, apologies for the confusion. With Next.js, client components are pre-rendered on the server and hydrated on the client. It's the same behaviour that the /pages router has by default.

For the second sentence:

Components in the Client Component module graph are primarily rendered on the client

This is the React behavior, without Next.js.

but with Next.js, they can also be pre-rendered on the server and hydrated on the client.

This is the Next.js optimization, on initial load.

But I can see how that is not very clear.

I'm updating the React Essentials page here if you have any further feedback: #51579

[gmoniava]

My point was it seems both quotes which I cited suggest something like this: "In Next.js, they are pre-rendered on the server and
hydrated on the client". However, the second quote seems to use the word "can" which the first quote doesn't. That's why I was confused - it felt those two quotes didn't say the same thing.

I see that PR plans to address some items like:

Explain how Server Components are different from SSR and Hydration
Explain how Client Components are pre-rendered in Next.js

This is good because I had question about the first one myself for example. You can see others are interested in the first one too.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.