Maybe it could be helpful to move calling this.updateMatches() from cWM to cDM. Note that this approach will make your components slower because they have to render twice, so use it with caution. This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. Components that render something different on the client can read a state variable like, which you can set to true in componentDidMount(). If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. The React docs suggest a two-pass render for such scenarios that will avoid the problem: In practice this can lead to some problems though if the DOM is really different – resulting in an incosistent DOM that is a mix of the desktop and the mobile markup. With React 16 it's no longer mandatory to have a 100% matching markup when rehydrating React will try to patch the DOM as best as it can. I'm pretty sure it was because the server side rendered markup was the desktop version and on the client the component immediately rendered the mobile markup when the respective media query matches. I recently had an issue while rehydrating server side rendered markup that contained a react-media component.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |