search

renatorib / react-sizes

:left_right_arrow: Hoc to easily map window sizes to props.
722 stars 36 forks source link

Prevent server/client mismatches on hydration #34

Closed danielr18 closed 5 years ago

danielr18 commented 5 years ago

When doing SSR, we want the initial render to be the same on both client and server, which is a bit tricky due to not having the size on server side, but that's what fallback is for. The issue is that if your fallback is different than the actual size in the client, it can render something different and cause mismatches.

I added a flag in the context to force usage of fallback in my fork, which can be used in the apps to force rendering with fallback size in both server and client, and can be disabled after app hydrates, at which point it would render any differences caused by the size change.

You can see the implementation here: https://github.com/renatorib/react-sizes/compare/master...LiveCoinWatch:force-fallback-client

Are you interested in a PR for this?

renatorib commented 5 years ago

I really like it as a solution! But I did not understand how it would work when you say:

and can be disabled after app hydrates

Like, I know you can change the Provider config after a componentDidMount, for example, but I think this would cause a flash of different styles in the screen, right?

danielr18 commented 5 years ago

Yes, that's exactly what I do:

const sizesConfig = { fallbackWidth: 768, fallbackHeight: 1024, forceFallback: !this.state.didMount }

And yes, differences can be noticeable after app mounts if the guessed fallback is different, but that's the tradeoff when doing SSR and using something like react-sizes. What this prevents is the issues that can happen by not rendering the same in server and client initially.

When I just need to hide/not render something, I use something like this: https://gist.github.com/danielr18/06abef32acb8b3a129738ae023bc6d1e. Here's a description of what it does: https://spectrum.chat/next-js/general/detect-and-load-css-for-mobile~d8b80ea5-7bd5-4ae3-a743-6c2d08f9926a?m=MTU0MjQwOTg0NDQ5MA==

renatorib commented 5 years ago

Oh, I got it.

Yes, in most of the time I use media queries in my apps too. I say about it at this (outdated) blog post https://medium.com/@renatorib/tackling-responsive-elements-in-react-and-why-ive-created-react-sizes-f7c87e3f9e64

Btw, that flag would be a good feature, feel free to open the pull-request!