How to correctly implement different views for Desktop and Mobile views

I’m new to NextJS. Currently using NextJS 13. Previously Iv been using ReactJS like 4,5 years. I mostly use responsive media queries from CSS, if possible. But thing not always work like that. Desktop and Mobile view are usually too different to handle via media queries, even showing data different sometimes. So my previous layout was like

/app
    /components
        /Button
        /Input
        /Drawer
    /pages
        /products
            /_desktop
                index.tsx
            /_mobile
                index.tsx
            /[slug]
                /_desktop
                    index.tsx
                /_mobile
                    index.tsxt
        /stores
            index.tsx
                /[id]
                    /_desktop
                        /index.tsx
                    /_mobile
                        /index.tsx

As you can see /products page have different folders desktop and mobile, because their looking is very different. but stores page have single index, because UI somehow done via CSS regardless viewer device. But then store detail page (id) have different views etc.

In index.tsx file I could use my own helper function isMobile(). Basically it listens window resizing and it’s width. If screen width is lesser than 992px it returns true, else returns false.

Now in NextsJS 13, I no longer can do it because of server component sends every content sending to client must be same (called hydration issue?). Also on server side, it doesnt have attribute like window.width.

So currently I’m using this method

<div className="hideDestkop">
    <MobileHeader />
<div>
<div className="hideMobile">
    <DesktopHeader />
<div>


.hideDesktop {
  @media (min-width: 992px) {
    display: none !important;
  }
}

.hideMobile {
  @media (max-width: 991px) {
    display: none !important;
  }
}

As you can see It sends everything to client regardless viewer device, then hides some of them depending on viewers device width. You already guessed downside of it. Lot of non used hidden elements in browser. I don’t want use middleware or something for user-agent, unless it’s only solution. Because current days, phones are so advanced, some even higher resolution than old monitors. Is there proper way to implement it?