How can you minimize the amount of JavaScript sent to the browser when using client components?

You keep client components as small and focused as possible, pushing interactivity down to the smallest piece of the tree that actually needs it, rather than marking an entire page or large section as a client component just because one small part needs interactivity.

// Instead of making the whole page a client component,
// isolate just the interactive button
function ProductPage() {
  return (
    <div>
      <ProductDetails />
      <AddToCartButton />
    </div>
  );
}