React Server Components là gì và khác client component thế nào?

Question

Accepted Answer

**Server Components (RSC)** render trên **server** và gửi một kết quả đã tuần tự hóa tới trình duyệt. Chúng gửi **không JavaScript** cho chính mình — chỉ dữ liệu/markup, không phải code của chúng. ## Hai loại ```jsx // Server Component (mặc định trong Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch TRỰC TIẾP trên server return ; // không JS client cho component này } // Client Component — chọn dùng cho tính tương tác: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hook/sự kiện cần client return ; } ``` ## Khả năng và ràng buộc | | Server Component | Client Component | |---|---|---| | Có thể `await` / fetch dữ liệu trực tiếp | ✅ | ❌ | | Truy cập tài nguyên/bí mật server | ✅ | ❌ | | `useState`/`useEffect`/sự kiện | ❌ | ✅ | | Gửi JS tới trình duyệt | ❌ (không) | ✅ | ## Tại sao điều này quan trọng - **Ít JavaScript client hơn** → tải và tương tác nhanh hơn. - **Fetch dữ liệu gần nguồn** (không phải round-trip API từ trình duyệt, không lộ thông tin đăng nhập DB). - Bạn **kết hợp** chúng: server component render client component cho các "đảo" tương tác. Một server component có thể render một client component, nhưng **không** ngược lại. ## Điểm vướng Props truyền qua ranh giới server→client phải **tuần tự hóa được** — bạn không thể truyền hàm hay instance lớp. RSC thay đổi mô hình tư duy từ "mọi thứ chạy trong trình duyệt" thành "render trên server theo mặc định, chỉ chọn client ở nơi bạn cần tính tương tác."

	Server Component	Client Component
Có thể `await` / fetch dữ liệu trực tiếp	✅	❌
Truy cập tài nguyên/bí mật server	✅	❌
`useState`/`useEffect`/sự kiện	❌	✅
Gửi JS tới trình duyệt	❌ (không)	✅