useMediaQuery to change component results in Hydration failed #70753
Unanswered
J4v4Scr1pt
asked this question in
Help
Replies: 1 comment 1 reply
-
I think, for this kind of problem, you need to throw in some CSS into the mix. And potentially, just use CSS for the most part. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Summary
I have an sidebar that is collapsible and is should also automatically collapse if the screen is under a certain size.
I use the useMediaQuery from usehooks-ts to achive this. As you can understand there is no issue as long as the screen is above my threshold. But if it is under the threshold and during the render it will start as not collapsed and after 1ms it will fold and the error occurs.
How would one approach this?
Everything is SSR until the last part inside of the sidebar. I can't move more of it to client.
Is there a way to recive the screen size on the server during the render?
One way is to use the dynamic fuction and turn off SSR, but that result in bad UI imo. becuase either you display the loadingstate or nothing at all.
How do you approach this when you have an scenario where you need to render something based on the browser?
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions