First, the setup. VariantA and VariantB are both client components with 'use client' and useState.

import { VariantA } from './VariantA'
import { VariantB } from './VariantB'

export default function Page() {
  const random = Math.random()
  const variant = random < 0.5 ? 'A' : 'B'

  return <main>{variant === 'A' ? <VariantA /> : <VariantB />}</main>
}

I was always under the impression that if VariantA is selected, VariantB’s bundle won’t make it to the browser. Until I got curious and tested it myself. Turns out that’s not the case. The http://localhost:3000/_next/static/chunks/app/path-to-page/page-d7bdefff71ae8536.js JS consists of both A and B.

Am I misunderstanding something? I thought one of the draws of RSC is that the client bundle can be optimized according to just what the user needs.