Why this matters
The production reason.
Client components ship JavaScript to the browser. Server Components do not, which makes them a better default for layouts, lists, article pages, and fetched content.
The clean pattern is to keep the page shell server-rendered and isolate only the interactive controls into small client islands.
This reduces bundle size and prevents stateful code from spreading across areas that only need markup.
Copy-ready example
// app/products/page.jsx
import FilterControls from "./FilterControls";
export default async function ProductsPage() {
const products = await getProducts();
return (
<>
<FilterControls />
<ProductGrid products={products} />
</>
);
}