SSR react hydrate mismatch problem #29
Comments
ValentinH
pushed a commit
to ValentinH/react-breakpoints
that referenced
this issue
Feb 23, 2020
As explained in ehellman#29, when the breapoint is wrongly guessed on the server, there will be an HTML mismatch during `ReactDom.hydrate()`. When using a CSS-in-JSS technique, this can lead to a completely broken page due to wrong CSS classnames being used. This PR simply solves this issue by letting the developer set the `guessedBreakpoint` on the client as well. Thanks to this, there will no mismatch during hydratation. Once the app is hydrated, it will be rerenderd using the real breakpoint (during `componentDidMount()` ). There will be a "blinking" effect on load when switching between the guesss breakpoint and the real one (as with current version) but now, there is no mismatch so no risk of unfortunate side-effects anymore.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If using the
currentBreakpointfor rendering different elements dependent on the breakpoint react cannot hydrate correctly if theguessedBreakpointdoes not match with the client. (I use theuser-agentfrom the request to guess the breakpoint on server side. Obviously this does not get always the correct breakpoint.)Related react issues:
It would be nice if the library supports this case. I think it should not calculate the
currentBreakpointdependent on the window width in theconstructorif there is aguessedBreakpoint. If there is aguessedBreakpointthecurrentBreakpointshould be calculated from the window width incomponentDidMount.What do you think?
The text was updated successfully, but these errors were encountered: