What is meant by nested server components in this guide?
Answered
Havana posted this in #help-forum
HavanaOP
In this guide:
https://nextjs.org/docs/getting-started/react-essentials#composing-client-and-server-components
It says that Next will render server components on the server, including server components that are nested inside client components. I can think of 2 different examples on how server components can be nested inside client components.
Example 1
/app/page.tsx
Example 2
/app/page.tsx
/app/components/ClientComponent.tsx
So, does Next render nested Server Components on both of those cases, or only Example 1 ?
https://nextjs.org/docs/getting-started/react-essentials#composing-client-and-server-components
It says that Next will render server components on the server, including server components that are nested inside client components. I can think of 2 different examples on how server components can be nested inside client components.
Example 1
/app/page.tsx
// server component
export default function Page() {
return <ClientComponent>
<ServerComponent />
</ClientComponent>
}Example 2
/app/page.tsx
// server component
export default function Page() {
return <ClientComponent />
}/app/components/ClientComponent.tsx
'use client'
// some imports
export default function ClientComponent() {
const [stuff, doStuff] = useState()
return <>
<ServerComponent />
</>
}So, does Next render nested Server Components on both of those cases, or only Example 1 ?
Answered by joulev
all components imported to client components become client components (example 2)
passing as props (example 1) is fine however, since you are only importing the returned value of the server component, so the server component can still be rendered on the server without disrupting the rendering logic of
passing as props (example 1) is fine however, since you are only importing the returned value of the server component, so the server component can still be rendered on the server without disrupting the rendering logic of
ClientComponent5 Replies
@Havana In this guide:
https://nextjs.org/docs/getting-started/react-essentials#composing-client-and-server-components
It says that Next will render server components on the server, including server components that are nested inside client components. I can think of 2 different examples on how server components can be nested inside client components.
**Example 1**
/app/page.tsx
// server component
export default function Page() {
return <ClientComponent>
<ServerComponent />
</ClientComponent>
}
**Example 2**
/app/page.tsx
// server component
export default function Page() {
return <ClientComponent />
}
/app/components/ClientComponent.tsx
'use client'
// some imports
export default function ClientComponent() {
const [stuff, doStuff] = useState()
return <>
<ServerComponent />
</>
}
So, does Next render nested Server Components on both of those cases, or only **Example 1** ?
example 1:
example 2:
ServerComponent is rendered as a server componentexample 2:
ServerComponent is rendered as a client componentall components imported to client components become client components (example 2)
passing as props (example 1) is fine however, since you are only importing the returned value of the server component, so the server component can still be rendered on the server without disrupting the rendering logic of
passing as props (example 1) is fine however, since you are only importing the returned value of the server component, so the server component can still be rendered on the server without disrupting the rendering logic of
ClientComponentAnswer
HavanaOP
Cool, thanks for clarifying! This can be verified by looking at the source of the initial page load, correct? In other words, Next doesn't do some sort of magic in which it renders servers components on the server then sends chunks via Ajax or something similar?
Cool, thanks for clarifying! This can be verified by looking at the source of the initial page load, correct?
No. Client components are also prerendered on the server so you cannot differentiate them just by looking at the source alone.
To determine if a component is rendered as a server component or not, add a console.log – if it is a server component you won’t see that log in the browser console ever
In other words, Next doesn't do some sort of magic in which it renders servers components on the server then sends chunks via Ajax or something similar?
What do you mean?
HavanaOP
You can ignore that last part, your answer to the first part is essentially what I was looking for. Thank you!