Next.jsServer Components render hoàn toàn trên server, HTML được gửi xuống client.
- Không có JavaScript bundle gửi xuống client.
- Có thể trực tiếp access database, file system, server-only APIs.
- Không hỗ trợ: state, effects, event handlers, browser APIs.
- Mặc định trong App Router.
tsx
// app/products/page.tsx — Server Component (mặc định)
// Có thể dùng async/await trực tiếp, access DB, không cần useEffect
async function ProductsPage() {
// Chạy trên server, không ship JS xuống client
const products = await db.products.findMany()
return (
<ul>
{products.map(p => (
<li key={p.id}>{p.name} — {p.price} VND</li>
))}
</ul>
)
}
export default ProductsPage