You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We need to allow server-side rendering, but there are some things to consider:
Unlike CSS where all devices get the same markup, the actual markup is going to be changing
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.
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.
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
Additionally, we could somehow patch matchMedia on the server to give us what we expect based on the device.
???
The text was updated successfully, but these errors were encountered:
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
We need to allow server-side rendering, but there are some things to consider:
initial
(let's not overloaddefault
), which always gets used for the initial render (client or server), and then was start the actual media query work incomponentDidMount
. This means that any device sniffing would be about determining what to use as the initial valuematchMedia
on the server to give us what we expect based on the device.The text was updated successfully, but these errors were encountered: