Context for server-side-rendering hard set the width
See original GitHub issueI 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:
- Created 3 years ago
- Reactions:2
- Comments:5 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I had a similar issue and double client render works fine for me:
On the server, it will render the app with the default dimensions
DEFAULT_WIDTH
xDEFAULT_HEIGHT
. On the client it will:@lenghia241 Let me know if that works for you.
Seems like this work.