Description
Hi,
I set up my app with server-side rendering.
But I got this warning in the browser:
React attempted to reuse markup in a container but the checksum was invalid.
This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting.
React injected new markup to compensate which works but you have lost many of the benefits of server rendering.
Instead, figure out why the markup being generated is different on the client or server
This is because react-media deletes some element from the DOM in the client-side according to media queries, but in the server-side rendering all elements are rendered because matches prop is true by default.
This approach causes different DOM elements to be rendered in the client and the server.
So, how to fix this warning?
I was thinking about the solution and I found this solution.
For example I have this code:
<Media query='(some query)'>
{matches => (matches ? MatchElement : UnmatchEment)}
</Media>
Result:
<MatchElement /> || <UnmatchElement>
My solution Result is:
<style>
MatchElement {
display: none;
}
UnmatchElement {
display: block;
}
@media (some query) {
MatchElement {
display: block;
}
UnmatchElement {
display: none;
}
}
</style>
<MatchElement />
<UnmatchElement />
I think that this is a correct way to do match server-side rendering with client-side rendering at the first time and it's possible to remove this approach for others rendering in the client-side only.
What do you think?
Thanks.