Server side render warning

[StefanoPastore]

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.

[mjackson]

Yep @StefanoPastore, if you need server-side rendering I'd say your solution works pretty well. I think all you'd need from us in that case is a <Media defaultMatches> prop that you could set true/false depending on which element you want to show by default.

Would you like to make a PR?

[StefanoPastore]

@mjackson of course.

I made it, I met two problems: to test the feature I implemented throw on console.error and I had to implement static method isClient and override it while testing.

Please see the commit messages for the change log.

Thanks.

[mjackson]

See #15