Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement support for server-side rendering #2

Open
AndrewIngram opened this issue Jun 26, 2015 · 1 comment
Open

Implement support for server-side rendering #2

AndrewIngram opened this issue Jun 26, 2015 · 1 comment

Comments

@AndrewIngram
Copy link
Contributor

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant