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 ProductsPageServer Components render entirely on the server and send HTML to the client.
- No JavaScript bundle is shipped to the client.
- They can directly access databases, the file system, and server-only APIs.
- They do not support: state, effects, event handlers, or browser APIs.
- They are the default in the App Router.
tsx
// app/products/page.tsx — Server Component (default)
// Can use async/await directly, access DB, no need for useEffect
async function ProductsPage() {
// Runs on server only, no JS shipped to client
const products = await db.products.findMany()
return (
<ul>
{products.map(p => (
<li key={p.id}>{p.name} — {p.price} USD</li>
))}
</ul>
)
}
export default ProductsPage