How do Server Components and Client Components work together in the same app?

Server Components can render Client Components as children, letting a mostly static page include small interactive pieces exactly where needed. However, a Server Component cannot be directly imported and rendered inside a Client Component, since Client Components have already been sent to the browser and cannot run server only code.

// Server Component
function ProductPage({ productId }) {
  const product = await getProduct(productId); // server only data fetching
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton productId={productId} /> {/* a Client Component */}
    </div>
  );
}