When to use server components vs client components.
Updated
Use for: product pages, category pages, blog posts, layouts, SEO metadata.
// app/products/page.tsx — Server Component (default in Next.js App Router)
import dash from "@/lib/dash"
export default async function Products() {
const { products } = await dash.products.list()
return products.map(p => <ProductCard key={p.id} product={p} />)
}
Use for: cart operations, authentication, form submissions, real-time UI.
"use client"
import dash from "@/lib/dash"
export function AddToCart({ productId, sizeId }) {
const handleAdd = async () => {
await dash.cart.add({ productId, sizeId, quantity: 1 })
}
return <button onClick={handleAdd}>Add to Cart</button>
}
| Feature | Component Type | Why |
|---|---|---|
| Product listing | Server | SEO, fast initial load |
| Variation picker | Client | Interactive state |
| Cart drawer | Client | Real-time updates |
| Blog post | Server | SEO, static content |
| Login form | Client | Form state, auth flow |
| Footer | Server | Static, uses global data |