Đặt `'use client'` ở đâu cho đúng? Nếu để ở layout gốc thì chuyện gì xảy ra?

'use client' không phải nhãn cho một file, nó đánh dấu ranh giới giữa hai đồ thị module. Mọi thứ được import từ file đó trở xuống đều bị coi là client và đi vào bundle gửi cho trình duyệt.

Đặt ở layout gốc thì cả ứng dụng thành client: mất khả năng truy cập DB/secret trực tiếp trong component, bundle JS tăng, và lợi thế của Server Component biến mất.

Nguyên tắc: đẩy ranh giới xuống lá. Giữ page/layout là server, tách phần cần tương tác ra component riêng.

// app/products/page.tsx  — server, không có 'use client'
import { AddToCart } from './add-to-cart'

export default async function Page() {
  const products = await db.product.findMany()
  return products.map(p => <AddToCart key={p.id} id={p.id} />)
}

// app/products/add-to-cart.tsx
'use client'
export function AddToCart({ id }: { id: string }) {
  const [busy, setBusy] = useState(false)
  // ...
}

Một client component vẫn có thể nhận server component qua children/props — phần đó vẫn render trên server, không lọt vào client bundle.