How do you decide whether a specific piece of a page should be a server component or a client component?

You default to server components for anything that does not need interactivity, browser only APIs, or React state, and only reach for client components for the specific, usually small, pieces of a page that genuinely need to respond to user interaction, manage local state, or use effects.

// Server component: static content and data fetching
async function ProductPage() {
  const product = await getProduct();
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton productId={product.id} /> {/* client component */}
    </div>
  );
}