Why is this client component getting rendered on the server
Unanswered
Blue Mockingbird posted this in #help-forum
Blue MockingbirdOP
I have a layout running as a server component importing a client component that uses document (browser api).
I'm still learning, but the behavior I would expect is that upon encountering a client component it would render the html and then send the js over to the client for hydration and not execute it.
But the browser api is being called on the server, resulting in errors.
Is this expected behavior?
I'm still learning, but the behavior I would expect is that upon encountering a client component it would render the html and then send the js over to the client for hydration and not execute it.
But the browser api is being called on the server, resulting in errors.
Is this expected behavior?
9 Replies
@Blue Mockingbird I have a layout running as a server component importing a client component that uses document (browser api).
I'm still learning, but the behavior I would expect is that upon encountering a client component it would render the html and then send the js over to the client for hydration and not execute it.
But the browser api is being called on the server, resulting in errors.
Is this expected behavior?
client components are pre rendered on the server
Blue MockingbirdOP
Isn't the js not executed though when pre-rendering? Isn't it shipped to the client for hydration?
Blue MockingbirdOP
I worded my question badly, just to clarify. The js is executed when pre-rendering on the server even for a client component?
@Blue Mockingbird I worded my question badly, just to clarify. The js is executed when pre-rendering on the server even for a client component?
the js in event handlers and effects aren't but rest of it is executed
Blue MockingbirdOP
Thanks a lot, that clears things up!
European sprat
All react / jsx is JS so it has to execute. You can put in checks for things to like window undefined and not execute part of the code that shouldn't be attempted to render on server
or use useEffect
Blue MockingbirdOP
Got it, perfect. Yeah, this makes perfect sense now; wanted to get my mental model cleared up. I'll just check for undefined