will parent 'use client' effect all children component?
Answered
Red-breasted Merganser posted this in #help-forum
Red-breasted MerganserOP
I read the official documentation, and it states that once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle. Additionally, I have to use a context provider to wrap it in app/layout.js. This context provider is used to hide the menu position, and it's difficult for me to change the hierarchy. Does this mean that all of my components will become client-side rendered? If so, it might seem less meaningful for me to use Next.js.
Answered by Asiatic Lion
not necessarily, you can’t put server components in client components directly but you can put them as the children of client components
9 Replies
Red-breasted MerganserOP
@Red-breasted Merganser I read the official documentation, and it states that once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle. Additionally, I have to use a context provider to wrap it in app/layout.js. This context provider is used to hide the menu position, and it's difficult for me to change the hierarchy. Does this mean that all of my components will become client-side rendered? If so, it might seem less meaningful for me to use Next.js.
Asiatic Lion
not necessarily, you can’t put server components in client components directly but you can put them as the children of client components
Answer
Asiatic Lion
so if you have use client, if you put server components directly into that file, it won’t work
but if passed as children it works
Red-breasted MerganserOP
thanks for reply Sectonic! do you mean my {children} will still be server component?
Asiatic Lion
yes
Red-breasted MerganserOP
wow it's pretty cool. is there any way to check if the current component is SSR or CSR?
I know I can't use react hooks in server component
I know I can't use react hooks in server component
Just to add to this discussion, it doesn't have to be just
More on this in the docs here: https://nextjs.org/docs/getting-started/react-essentials#recommended-pattern-passing-server-components-to-client-components-as-props
{children} it can technically be any props. I've used for this example: <ClientComponent sidebar={<ServerSidebar />} /> More on this in the docs here: https://nextjs.org/docs/getting-started/react-essentials#recommended-pattern-passing-server-components-to-client-components-as-props
The reason it works is because the client component doesn’t get the server component itself, it only gets the returned value of the server component which is allowed