Adxtti
Hydration error when using <Show>
https://docs.solidjs.com/guides/state-management https://docs.solidjs.com/reference/rendering/hydrate & https://www.solidjs.com/guides/server
During server side rendering,
hasRequired
and hasDefault
initialize at false
— upon hydration, the client will run your logic setting the hasRequired
and hasDefault
signals to true
, this mismatch is causing your hydration error
I believe Solid behaves this way, and has its reasons, I'm sure a teams member will have a better response14 replies
Hydration error when using <Show>
because
<Show>
renders its children based on the value of its when
prop
This leads to a situation in which the server-rendered HTML doesn’t include ”Required”
and ”Default”
(since the signals are false
) but the client-rendered HTML does therefore leading to your hydration error
You should iterate over the props.components
array to solve this
14 replies