Is there an easy was to tell server components that are sent to the client?
Answered
Orinoco Crocodile posted this in #help-forum
Orinoco CrocodileOP
From my understanding, any components that are nested within client components also become client components. But is there a good way to inspect when this happens?
Otherwise it could be easy to accidentally send a component designed for the server to the client.
Otherwise it could be easy to accidentally send a component designed for the server to the client.
Answered by Rafael Almeida
you can use the
server-only package and use it in server components, here's an example from the docs: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment4 Replies
you can use the
server-only package and use it in server components, here's an example from the docs: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environmentAnswer
Orinoco CrocodileOP
@Rafael Almeida thanks this will help in a lot of cases! However, I’m concerned about times where components that were implicitly server components are now client components because someone unknowingly wraps them in a client component higher up the tree, bloating the bundle. Is the current solution to explicitly import server-only every time?
@Orinoco Crocodile <@258390283127881728> thanks this will help in a lot of cases! However, I’m concerned about times where components that were implicitly server components are now client components because someone unknowingly wraps them in a client component higher up the tree, bloating the bundle. Is the current solution to explicitly import server-only every time?
yeah I am not sure there is another alternative
@Orinoco Crocodile <@258390283127881728> thanks this will help in a lot of cases! However, I’m concerned about times where components that were implicitly server components are now client components because someone unknowingly wraps them in a client component higher up the tree, bloating the bundle. Is the current solution to explicitly import server-only every time?
No this is impossible I think, you need to add server-only manually for the components of interest