question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Context for server-side-rendering hard set the width

See original GitHub issue

I am trying to use react-responsive to conditional rendering components base on device width. Everything worked great in client side, but for SSR I followed the documentation to use Context to pass a specific width for initial server render. However, the width that react-responsive received now hard set to the width in Context even if I resize the browser.

Component to define device base on device width:

import { useMediaQuery } from 'react-responsive';

export const Desktop = ({ children }) => {
const isDesktop = useMediaQuery({ minWidth: 801 });
return isDesktop ? children : null;
};

export const Tablet = ({ children }) => {
const isTablet = useMediaQuery({ minWidth: 426, maxWidth: 800 });
return isTablet ? children : null;
};

export const Mobile = ({ children }) => {
const isMobile = useMediaQuery({ maxWidth: 425 });
return isMobile ? children : null;
};

export const MobileTablet = ({ children }) => {
const isMobile = useMediaQuery({ maxWidth: 800 });
return isMobile ? children : null;
};

My use for DeviceIdentifier component:

...
     <Desktop>
        <CategoryTree />
     </Desktop>
...
      <MobileTablet>
        <BurgerMenu
          open={burgerMenuOpen}
          onOpenStateChange={setBurgerMenuOpen}
        />
      </MobileTablet>
...

Context wrapper in _app.js

import { Context as ResponsiveContext } from 'react-responsive';

...
<ResponsiveContext.Provider value={{ width: 1440 }}>
    <Component {...pageProps} />
</ResponsiveContext.Provider>
....

Since I set the width in the context 1440px, my BurgerMenu component is currently never rendered even if resize the browser. Anybody have any idea how to make this work both in SSR and client side?

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
pwlmaciejewskicommented, Aug 20, 2020

I had a similar issue and double client render works fine for me:

function MyApp() {
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    setInitialized(true);
  }, []);

  const app = (<div>My app</div>);

  return initialized ? (
    app
  ) : (
    <ResponsiveContext.Provider value={{ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT }}>
      {app}
    </ResponsiveContext.Provider>
  );
}

On the server, it will render the app with the default dimensions DEFAULT_WIDTH x DEFAULT_HEIGHT. On the client it will:

  1. render initially with the default dimensions to hydrate properly
  2. re-render with the correct browser dimensions

@lenghia241 Let me know if that works for you.

1reaction
lenghia241commented, Jun 3, 2020
              {typeof window !== 'undefined' ? (
                <Component {...pageProps} />
              ) : (
                <ResponsiveContext.Provider value={{ width: deviceWidth }}>
                  <Component {...pageProps} />
                </ResponsiveContext.Provider>
              )}

Seems like this work.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-responsive doesn't work with Server-side rendering
However, the width that react-responsive received now hard set to the width in Context even if I resize the browser.
Read more >
What is server-side rendering and how does it improve site ...
Server-side rendering ensures that website content appears quickly, without first having to download and run application code.
Read more >
Server-Side Rendering in React using Next.js – How it Works ...
1. Create a new folder for the React app. · 2. Install the dependencies like Babel. · 3. Configure the dependencies installed and...
Read more >
Server Side Rendering at Scale - Yelp Engineering Blog
Background. What Is SSR? Server Side Rendering is a technique used to improve the performance of JavaScript templating systems (such as ...
Read more >
Server-Rendering Responsively - Artsy Engineering
We use server-side rendering (SSR) to deliver every page you hit on ... @artsy/fresnel allows you to define a set of breakpoint widths, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found