How to work with Gatsby SSR & react-responsive

[lukasdcns]

Hello, I am integrating react-responsive into my Gatsby (V4) application. However, I am having trouble with server-side rendering (SSR). Specifically, I need to return a different context width in gatsby-ssr.js based on the type of device.

My idea would be to have a result that looks like this:

if (desktop) { <ResponsiveContext.Provider value={{ width: 1440 }}> {element} </ResponsiveContext.Provider> } else { <ResponsiveContext.Provider value={{ width: 991 }}> {element} </ResponsiveContext.Provider> }

I'm relatively new. Any help you can offer would be greatly appreciated.

[xSyki]

I do not recommend using it together with gatsby, after building it throws errors about hydration.

"Hydration failed because the initial UI does not match what was rendered on the server."

react-dom.production.min.js:131 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at sa (react-dom.production.min.js:131:159)
    at Ei (react-dom.production.min.js:293:379)
    at ks (react-dom.production.min.js:280:389)
    at ys (react-dom.production.min.js:280:320)
    at vs (react-dom.production.min.js:280:180)
    at as (react-dom.production.min.js:268:209)
    at S (scheduler.production.min.js:13:203)
    at MessagePort.T (scheduler.production.min.js:14:128)
sa @ react-dom.production.min.js:131
Ei @ react-dom.production.min.js:293
ks @ react-dom.production.min.js:280
ys @ react-dom.production.min.js:280
vs @ react-dom.production.min.js:280
as @ react-dom.production.min.js:268
S @ scheduler.production.min.js:13
T @ scheduler.production.min.js:14
react-dom.production.min.js:293 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ei (react-dom.production.min.js:293:39)
    at ks (react-dom.production.min.js:280:389)
    at ys (react-dom.production.min.js:280:320)
    at vs (react-dom.production.min.js:280:180)
    at os (react-dom.production.min.js:271:88)
    at as (react-dom.production.min.js:268:429)
    at S (scheduler.production.min.js:13:203)
    at MessagePort.T (scheduler.production.min.js:14:128)

[yocontra]

Does gatsby have an equivalent of this next.js code?

import dynamic from "next/dynamic"
const MediaQuery = dynamic(() => import("react-responsive"), {
  ssr: false
})

[xSyki]

@yocontra As Kyle Mathews said: "Yeah you should generally use CSS for media queries since when we render on the server, we don't know what kind of device will be viewing the page. If you do responsive stuff in JavaScript then your page will jump around often when you load because it'll look one way on the initial load and then when JS loads, it'll re-render based on the media query there."

gatsbyjs/gatsby#2142

[yocontra]

I think that's fine, using plain CSS media queries should work if they don't have the concept of dynamic imports.

There are some novel workarounds (https://developer.chrome.com/blog/automating-resource-selection-with-client-hints/#automating-resource-selection-with-client-hints) that may make this easier to implement in the future just using the context stuff outlined in the README. Using client hints the browser can provide enough information for the server to accurately render, but only works with deviceWidth / width. No FF or Safari support either.

[v1shva]

Was facing a similar issue on nextjs. I did following as a workround

const isMobileView = useMediaQuery({
	maxWidth: MediaWidths.tablet,
});

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
setIsMobile(isMobileView);
}, [isMobileView]);

[yocontra]

Going to close this since the answer from the gatsby team seems to be "just use css" and I don't disagree for building purely static sites that seems fine.