Does nextjs 16 render client components on the server?
Answered
West African Lion posted this in #help-forum
West African LionOP
Nextjs 14 docs are very clear: https://nextjs.org/docs/14/app/building-your-application/rendering/client-components
Nextjs 16 docs imply this is no longer the case: https://nextjs.org/docs/app/getting-started/server-and-client-components
So does nextjs initially render client components on the server? Or is this done by the client from scratch?
To optimize the initial page load, Next.js will use React's APIs to render a static HTML preview on the server for both Client and Server Components.
The HTML is used to immediately show a fast non-interactive initial preview of the route.
Nextjs 16 docs imply this is no longer the case: https://nextjs.org/docs/app/getting-started/server-and-client-components
The RSC payload contains [...] placeholders for where Client Components should be
So does nextjs initially render client components on the server? Or is this done by the client from scratch?
Answered by alfonsüs ardani
On the server
Client components arer used to pre-render HTML
Client components arer used to pre-render HTML
45 Replies
Nextjs uses rsc (react server components)
When a website is loaded, nextjs will send an instant html preview to the client
And the connection will be kept open for js to come in and hydrate the component
Cassin's Kingbird
Unless u explicitly mark the component with the "use client" directive or the place where the component is called is already a client component
@Cassin's Kingbird Unless u explicitly mark the component with the "use client" directive or the place where the component is called is already a client component
West African LionOP
yes, in this case the component would be marked with "use client" (that's what I thought a client component was defined as)
@West African Lion yes, in this case the component would be marked with "use client" (that's what I thought a client component was defined as)
Cassin's Kingbird
or if a component is imported into a client component
West African LionOP
true!
Cassin's Kingbird
'use client'
import {Component} from "@/components";
export default function Page() {
return (
<Component/>
)
}in this case Component will also be rendered on client
even if the code for it isnt marked with "use client"
West African LionOP
and the html payload the server sends does not contain the markup for the Component in nextjs 16, but it would have in nextjs 14?
@West African Lion and the html payload the server sends does not contain the markup for the Component in nextjs 16, but it would have in nextjs 14?
Cassin's Kingbird
it wouldnt have in both
in "use client", the server does not render any html payload
it sends all the js straight to the browser for it to render
West African LionOP
I see - the nextjs 14 documentation was incorrect if that's the case
@West African Lion I see - the nextjs 14 documentation was incorrect if that's the case
Cassin's Kingbird
that might be why it has changed
West African LionOP
that would be a good reason yeah lmao
its still the case
@alfonsüs ardani **On the server**
Client components arer used to pre-render HTML
West African LionOP
aha right I see - I have misunderstood what the RSC payload is for, in that case
thank you!
and easily confirmed by viewing a client component in a browser without js (or curl)
I wonder if there's a reason the docs are vague about this? "used to pre-render HTML on the server" would be a helpful addition, given that the link on pre-render goes to caching strategies which does not seem immediately relevant and doesn't explain what prerendering is
@West African Lion I wonder if there's a reason the docs are vague about this? "used to pre-render HTML on the server" would be a helpful addition, given that the link on pre-render goes to caching strategies which does not seem immediately relevant and doesn't explain what prerendering is
its very hard to communicate to broad audience of the develoepers
can you point out which part of the docs are vague?
@alfonsüs ardani can you point out which part of the docs are vague?
West African LionOP
the line you highlighted - it could just as easily mean "the html is pre-rendered on the client from the RSC payload before being presented to the user and then hydrated", for example
i will just assume what you dont understand: here pre-rendering is part of caching strategy
"the html is pre-rendered on the client from the RSC payload before being presented to the user and then hydrated" but thats not true?
the html are pre-rendered on the server not from the client
West African LionOP
yes, but the docs don't say that, they only imply it
i mean it does says "on the server" from the heading?
West African LionOP
aha - that is true
the pre-render link does make your point right: it doesn't seem immediately relevant and explain what pre-rendering is
should just not add the link at all to not confuse readers
West African LionOP
I think that's what happened here yeah: the page absolutely does answer my question, but I got confused
its a lot of steps
even here i think
pre-render is being thrown casually since here in nextjs there is a lot of different types of "pre" renderif you have more doubts dont fret to ask more questions!
West African LionOP
in that context the link makes sense, if pre-render is a generic umbrella term and then the link explains what it actually means
it still doesn't explain how it relate to client components
West African LionOP
but either way my original question is answered with a canonical citation and I don't even need to make a docs PR. thank you for your help!
@West African Lion but either way my original question is answered with a canonical citation and I don't even need to make a docs PR. thank you for your help!
glad we can help! please mark message that is the most useful for you!
West African LionOP
oh thank you for the reminder!