When a server comp is a child of a client comp it becomes a client component - will it ever change?
Answered
Brown bear posted this in #help-forum
Brown bearOP
When a Server Component, by which I mean something that's SSR-able, is a child of a client component I believe it gets converted automatically to a child component.
We've been putting an explicit 'use client' on these automatically converted components. But I worry this might be 'improved' by Next in future and these server-child components will be able to leverage SSR-like features and abilities. Is the explicit 'use client' on a component that doesn't require it (in a standalone sense) a bad idea?
Very minimal pseudo-sample
MainComponent.js
ChildComponent.js
We've been putting an explicit 'use client' on these automatically converted components. But I worry this might be 'improved' by Next in future and these server-child components will be able to leverage SSR-like features and abilities. Is the explicit 'use client' on a component that doesn't require it (in a standalone sense) a bad idea?
Very minimal pseudo-sample
MainComponent.js
'use client'
const x = useState(5)
return <foo><span>{x}</span><ChildComponent /></foo>ChildComponent.js
'use client' // <-- This is what i'm talking about, this would get automatically made 'client' right but should we be explicitly putting it here? Even if this is the only place the component is used?
return <span>Bar Bar</span> // i.e. fairly static contentAnswered by James4u
if it's child component which is normally imported to a client component(parent one) it becomes a client component
19 Replies
@Brown bear When a Server Component, by which I mean something that's SSR-able, is a child of a client component I believe it gets converted automatically to a child component.
We've been putting an explicit 'use client' on these automatically converted components. But I worry this might be 'improved' by Next in future and these server-child components will be able to leverage SSR-like features and abilities. Is the explicit 'use client' on a component that doesn't require it (in a standalone sense) a bad idea?
Very minimal pseudo-sample
**MainComponent.js**
'use client'
const x = useState(5)
return <foo><span>{x}</span><ChildComponent /></foo>
**ChildComponent.js**
'use client' // <-- This is what i'm talking about, this would get automatically made 'client' right but should we be explicitly putting it here? Even if this is the only place the component is used?
return <span>Bar Bar</span> // i.e. fairly static content
Here are my points
- Server component is not only something that's SSR-able. Client component is still rendered on the server in Next.js
- If we follow your scenario, we can't pass Server component as a child of a client component as it will be marked as a "client component".
- Server component is not only something that's SSR-able. Client component is still rendered on the server in Next.js
- If we follow your scenario, we can't pass Server component as a child of a client component as it will be marked as a "client component".
and also for the fairly static content, why would you prefer "use client"? if you don't have any user interactions or states, it's better to be a server component
in your
ChildComponent.jsBrown bearOP
Thanks James, yes exactly the 'use client' on ChildComponent isn't needed - but I think the end result would be the same (without the
Really interesting about SSR thank you
I think there's no real performance benefit to omitting 'use client' on ChildComponent now (or is there?) - but I'm asking mainly if there might be in the future?
use client it would get automatically converted to a client component anyway because it's a child of a client component)Really interesting about SSR thank you
I think there's no real performance benefit to omitting 'use client' on ChildComponent now (or is there?) - but I'm asking mainly if there might be in the future?
let me clarify again, yeah if your client component imports a child component <ChildComponent />, it is automatically a client component
"use client" is just a directive for indicating client side boundary
what I meant in previous reply was about passing a component as a child like following
<ClientComponent>
<ChildComponent />
</ClientComponent>in this pattern, your <ChildComponent /> can be a server component
Brown bearOP
Gotcha thanks
Do you think there's a chance of an optimisation later that'll make the nested ChildComponent in my example a server component? Which would mean I shouldn't be putting in that explicit
Do you think there's a chance of an optimisation later that'll make the nested ChildComponent in my example a server component? Which would mean I shouldn't be putting in that explicit
use client right now?Nope
if it's child component which is normally imported to a client component(parent one) it becomes a client component
Answer
it can't be a server component as its parent component is client component
@Brown bear any other questions?
Brown bearOP
Thanks for the nudge
yr welcome! plz mark solution to close this thread 🙂
Brown bearOP
Trying to find the button 😹
in the apps menu, savage
thanks