Does using React Context in your layout make everything client components?
Answered
Ratonero Mallorquin posted this in #help-forum
Ratonero MallorquinOP
As topic asks, I wonder if this is a rule of thumb you can follow or not.
Wrap your body tag in a layout with a react context (which in turn has "use client"), and what have you?
From that point on, everything deeper in the tree will always be client components, correct?
As in everything from there should never assume to be "safe" from client execution. It is not safely executed on the server with potentially sensitive information safe.
Wrap your body tag in a layout with a react context (which in turn has "use client"), and what have you?
From that point on, everything deeper in the tree will always be client components, correct?
As in everything from there should never assume to be "safe" from client execution. It is not safely executed on the server with potentially sensitive information safe.
Answered by Ray
no, because the children of the client component can be server component
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props
7 Replies
@Ratonero Mallorquin As topic asks, I wonder if this is a rule of thumb you can follow or not.
Wrap your body tag in a layout with a react context (which in turn has "use client"), and what have you?
From that point on, everything deeper in the tree will always be client components, correct?
As in everything from there should never assume to be "safe" from client execution. It is not safely executed on the server with potentially sensitive information safe.
no, because the children of the client component can be server component
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props
Answer
@Ray no, because the children of the client component can be server component
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props
Ratonero MallorquinOP
Is there any way then to mark a server component as something like
I tried that directive but it's only for server actions, not server components.
"use server"; to signify it should only be a server component and warn if it's ever accidentally rendered in client?I tried that directive but it's only for server actions, not server components.
@Ratonero Mallorquin Is there any way then to mark a server component as something like `"use server";` to signify it should only be a server component and warn if it's ever accidentally rendered in client?
I tried that directive but it's only for server actions, not server components.
all component are server by default, if you want to prevent a function being imported to client, you could use
server-only package to prevent it'use server' is for marking a server actionRatonero MallorquinOP
Much appreciated, thank you!
no prob