Best way to show different layouts when pages are cached on CDN

Option 1 – using JSX

<div>
    {window.innerWidth < 550 ? <MobileLayout /> : <DesktopLayout />}
</div>

Option 2 – using CSS

js
<div>
    <MobileLayout className="mobile"/>
    <DesktopLayout className="desktop"/>
</div>

css
@media (min-width: 550px) { 
    .desktop {
        display: none;
    }
}

@media (max-width: 550px) { 
    .mobile {
        display: none;
    }
}

My coworker mentioned that we should avoid option 1 because we cache the page on Fastly and it is possible for a desktop user to be served the mobile layout. I was under the impression that the server responses are cached before the JS is executed and returned to the client. Wouldn’t the conditional render just happen on the client and thus desktop users will see desktop layout and mobile users will see mobile layout even with option 1 for cached pages?