Passing Data Across the Boundary
Server Components can render Client Components and pass serializable props to them. A common pattern is to fetch data on the server and provide only the data required for interactivity to a client component.
For example, a product page can retrieve product information on the server while an AddToCartButton remains a Client Component.
This architecture allows the server to perform data access while the browser handles interaction.
Server to Client Data Flow
import AddToCartButton from './AddToCartButton';
export default async function ProductPage() {
const product = await getProduct();
return (
<section>
<h1>{product.name}</h1>
<p>{product.price}</p>
<AddToCartButton productId={product.id} />
</section>
);
}💡 The server retrieves the product while the interactive button remains isolated as a Client Component.
Key Takeaways
- Server Components can render Client Components.
- Pass only the data needed by the client.
- Keep database and secret-dependent logic on the server.