Conditional rendering of components based on screen size

🙋Get Help
1

I have been trying to implement a way for rendering components depending on the screen size. At the moment it works, however we are getting some errors in the console.
The errors are related to the server and the client having different output.
This of course happens because on the server we cannot know the screen size so we the queries basically dont work.
So, we have a components like this:

const SmallOnly = ({ children }) => {
  const smallOnly = useMediaQuery({ query: '(max-width: 39.9375em)' })
  return smallOnly ? children : null
}

This will allow us to render elements only on small screens. useMediaQuery comes from a package called react-responsive.
So this component will be used like this:

<LeftHeader>
  <SmallOnly>{shoppingCartIcon}</SmallOnly>
  <Medium>{logo}</Medium>
</LeftHeader>

Which causes the following error:

Warning: Expected server HTML to contain a matching <section> in <div>.
section
StyledTopBar
TopBar
Medium
Header
Theme
Component
App
FrontityApp

So for me its clear why this error happens. Different HTML on server and client causes this, however I cannot figure out if there is any way around it.

Does anyone have any ideas how we can make this work, without causing errors?
Looking forward to hearing if there are some nice ideas around this.

2

Since it’s impossible for the server to know how the client will handle the content, it’s not possible to do this in a stable way. And because Frontity uses SSR this will always be the case.

I would say that the only reliable method is to parse all content, and use CSS to show/hide content with media queries instead.

3

Yeah, as mentioned in my comment, I understand why it works like this. Was just wondering if someone has some creative ideas to go around this.

Thanks anyways for your input, Johan. Appreciate your time.

4

Hi @ni.bonev currently I am handling the same problem like this,

I am fetching both components. and then hiding one of them using media-query css