import { getViewport } from '@/lib/get-viewport';

import dynamic from 'next/dynamic';

const SidebarDesktop = dynamic(() => import('./sidebar-desktop'), { ssr: false });
const SidebarMobile = dynamic(() => import('./sidebar-mobile'), { ssr: false });

const Sidebar = () => {
  const { isDesktop } = getViewport();

  return isDesktop ? <SidebarDesktop /> : <SidebarMobile />;
};

export default Sidebar;

The SidebarDesktop and SidebarMobile components are client components. So they are included in the client side JS bundle and being sent to the browser (I searched in the dev tool and found those components in a JS bundle). But I don't want the SidebarMobile component to be included in the bundle when the viewport is desktop and vise-varsa.
How to achieve this?