React Server Components là gì?
React Server Components (RSC) là mô hình render mới trong React 18+, cho phép các component chạy hoàn toàn trên server, không gửi JavaScript xuống client. Thay vì hydration toàn bộ tree, RSC chỉ gửi HTML và data cần thiết, giảm bundle size, cải thiện TTFB và SEO.
RSC xuất hiện đầu tiên trong Next.js 13 App Router, dần trở thành tiêu chuẩn cho React app hiện đại. Kết hợp với Server Actions, giúp xây dựng full-stack app trong cùng một codebase.
Khác biệt giữa Server Components và Client Components
| Điểm | Server Components | Client Components |
|---|---|---|
| Chạy ở | Server only | Server + Client (hydration) |
| Bundle size | 0 bytes JS | Đóng gói vào client bundle |
| Truy cập | File system, DB, env vars | Không truy cập trực tiếp server resource |
| State | Không có useState/useEffect | Có đầy đủ hooks và event handlers |
| Event handlers | Không có onClick, onSubmit | Có thể xử lý sự kiện client |
| Third-party libs | Chỉ pure functions, không dùng DOM | Có thể dùng bất kỳ lib nào |
Server Components là “server-only”, Client Components là “client-interactive”.
Cách dùng trong Next.js App Router
Mọi file trong app/ mặc định là Server Component. Để làm Client Component, thêm 'use client' ở đầu file.
// app/page.tsx – Server Component (mặc định)
import { getPosts } from '@/lib/db'
export default async function HomePage() {
const posts = await getPosts() // Truy cập DB trực tiếp
return (
<main>
<h1>Blog</h1>
<PostsList posts={posts} /> {/* Client Component */}
</main>
)
}
// app/posts-list.tsx – Client Component
'use client'
import { useState } from 'react'
export default function PostsList({ posts }) {
const [search, setSearch] = useState('')
return (
<div>
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Tìm kiếm bài viết..."
/>
<ul>
{posts
.filter(p => p.title.includes(search))
.map(p => <li key={p.id}>{p.title}</li>)
}
</ul>
</div>
)
}Server Component thực hiện data fetching, truyền props xuống Client Component để tương tác.
Lợi ích thực tế
- Giảm JavaScript bundle: Không cần gửi code data fetching, ORM, hoặc libs nặng xuống client.
- TTFB nhanh hơn: Server render HTML ngay, không chờ hydration.
- SEO tốt hơn: Crawler thấy nội dung đầy đủ mà không cần chạy JS.
- An toàn hơn: API keys, DB credentials không rò rỉ ra client bundle.
- Streaming SSR: React có thể stream từng RSC khi sẵn sàng.
Giới hạn và best practices
1. Không thể dùng state/hooks
Dùng URL search params hoặc truyền qua props từ parent.
2. Không thể truy cập browser APIs
Không có window, document, localStorage. Dùng cookies qua headers hoặc chuyển sang Client Component.
3. Third-party libs phải pure
Libs như date-fns, lodash OK. Libs phụ thuộc DOM (ví dụ: chart libs) phải dùng trong Client Component.
4. Data fetching pattern
Dùng async/await trực tiếp trong component, không cần useEffect.
Kết luận
React Server Components thay đổi cách chúng ta suy nghĩ về full-stack development. Bằng cách tách biệt rõ ràng giữa logic server và interactivity client, RSC giúp xây dựng ứng dụng React nhanh hơn, an toàn hơn, và dễ bảo trì hơn. Nếu bạn đang dùng Next.js 13+, hãy bắt đầu chuyển đổi gradual từ pages/router tới App Router và sử dụng RSC cho data-heavy components.
