joeybaker / react-element-query

Element queries for react components.
Other
86 stars 7 forks source link

Remove server-side jank #4

Open joeybaker opened 8 years ago

joeybaker commented 8 years ago

Maybe we can use https://github.com/commenthol/ua-parser-caps to allow the server to auto-detect screen size?

jokeyrhyme commented 8 years ago

Making any assumptions about device screen dimensions based on user agent sniffing seems like a terrible idea. The only thing that is remotely accurate from a user agent string is device brand / vendor, and even that can't be depended upon.

So in lieu of user agent sniffing, perhaps a default size should be rendered in a <noscript />, whilst a JavaScript-enabled rendering is initially hidden via CSS. Once JavaScript has the real dimensions and has adjusted accordingly, display the rendering.

I'm not sure that a one-size-fits-all default size can be determined, as this will differ per use case. Maybe assuming the dimensions of a small phone would be a decent fallback? /shrug

If they are available in the request headers, Client Hints might also be useful for this purpose:

joeybaker commented 8 years ago

Yea! Client Hints are really the answer. I agree that UA sniffing is a terrible idea (though until client hints becomes more supported, it might be the only viable option).

The "default" option you mentioned is already supported!