search

onefinestay / react-respond-to

Responsive Component for React
Other
23 stars 3 forks source link

Implement support for server-side rendering #2

Open AndrewIngram opened 9 years ago

AndrewIngram commented 9 years ago

We need to allow server-side rendering, but there are some things to consider:

  1. Unlike CSS where all devices get the same markup, the actual markup is going to be changing
  2. Following on from that It's not unreasonable that someone may want to do some device sniffing (or other mechanism) to work out the capabilities of the device making the request. To me this seems like the only way to minimise occurrences of sending the wrong markup for the device.
  3. But sometimes the wrong markup will be sent, this means the initial render of this component needs to respect what the server thought it should be to avoid React throwing errors.
  4. The simplest solution is to specify a particular option as initial (let's not overload default), which always gets used for the initial render (client or server), and then was start the actual media query work in componentDidMount. This means that any device sniffing would be about determining what to use as the initial value
  5. Additionally, we could somehow patch matchMedia on the server to give us what we expect based on the device.
  6. ???
AndrewIngram commented 9 years ago

So i'm leaning towards not trying to do anything clever and just having an initial property. The reason is that is that some media queries are highly dependent on the page as rendered in the browser, for example a min-width query that uses CSS-dependent units like ems or rems