Dealing with window.innerwidth

🙋Get Help
1

On my Archive page I want to render different components on Mobile and Desktop. My code looks like this:

import { Box } from '@chakra-ui/react'
import { connect } from 'frontity'
import { CoverItem, FeaturedCoverItem } from '../home/cover-items'
import ArchiveItem from './archive-item'
import Pagination from './pagination'

const Archive = ({ state }) => {
  // Get the data of the current list.
  const data = state.source.get(state.router.link)

  return (
    <Box as='section'>
      {/* Iterate over the items of the list. */}
      {data.items.map(({ type, id }, index) => {
        const item = state.source[type][id]
        return (typeof window !== 'undefined' && window?.innerWidth > 767)
          ? <ArchiveItem key={item.id} item={item} index={index} type={type} />  // On desktop
          : ( // On Mobile:
            index === 0
              ? <FeaturedCoverItem key={id} item={item} isLeft index={index} />
              : <CoverItem key={id} item={item} isLeft />
          )
      })}

      <Pagination />
    </Box>
  )
}

export default connect(Archive)

It works as expected, if user navigates to the archive page from an other internal page. But if user arrives directly to an archive, then always the mobile version is appearing.
To reproduce it, visit Színház Archives - Színház.online . Thats an archive page and it’s appearing incorrect on desktop. If you click on any menu items, you will see the correct layout of an Archive page.
I tried to solve it with useEffect, and with the global npm package, but non of them worked for me.
Any advice?

2

Hi @koli14

This is happening because when a user arrives directly on an archive page that page is being created in SSR, and the window object does not exist in SSR, it only exists in CSR.

Also useEffect does run in SSR, it only runs in CSR after the component has rendered.

You might find these articles useful: