React Server Components Là Gì?
React Server Components (RSC) là tính năng mới nhất trong React 19, cho phép chia nhỏ giao diện thành hai loại thành phần: Server Components chạy trên máy chủ và Client Components chạy trên trình duyệt. Sự tách biệt này giúp ứng dụng React nhẹ hơn, tải nhanh hơn và tối ưu SEO tốt hơn bao giờ hết.
Khái niệm này được giới thiệu lần đầu qua Next.js App Router và nay đã trở thành một phần cốt lõi trong kiến trúc full-stack React. Thay vì tải toàn bộ JavaScript xuống trình duyệt, Server Components chỉ gửi HTML thuần — giảm đáng kể thời gian tải đầu tiên (Time to Interactive).
Tại Sao Cần React Server Components?
Ứng dụng React truyền thống (CSR) phải tải toàn bộ bundle JavaScript trước khi hiển thị nội dung. Điều này gây ra vấn đề:
- Thời gian tải chậm: Người dùng phải chờ toàn bộ JS parse và execute trước khi thấy nội dung.
- SEO kém: Bot của công cụ tìm kiếm không thực thi JavaScript, nên nội dung CSR thường không được index đầy đủ.
- Bundle lớn: Ứng dụng phức tạp dễ có bundle trên 1MB, ảnh hưởng hiệu suất trên mobile.
Server Components giải quyết tất cả bằng cách render ở server, chỉ gửi HTML đã render sẵn về trình duyệt. Kết hợp với Streaming, người dùng thấy nội dung từng phần thay vì chờ toàn bộ.
Server Components vs Client Components
| Tiêu chí | Server Component | Client Component |
|---|---|---|
| Chạy ở đâu | Trên máy chủ | Trên trình duyệt |
| Truy cập DOM/Browser API | Không được phép | Được phép |
| useState, useEffect | Không dùng được | Dùng được |
| Truy cập trực tiếp DB/API | Được phép | Cần fetch từ client |
| Kích thước bundle | Nhỏ hơn (không gửi JS) | Lớn hơn (gửi JS) |
Cách Sử Dụng Cơ Bản
Đánh Dấu Server vs Client
Mặc định, mọi component trong App Router là Server Component. Để dùng Client Component, thêm directive ở đầu file:
"use client"
Directive này đánh dấu toàn bộ file là Client Component, bao gồm cả các import từ file khác trong cùng file. Điều quan trọng: một Server Component có thể import Client Component, nhưng ngược lại không được.
Ví Dụ Cấu Trúc
- app/page.tsx — Server Component mặc định, truy cập DB trực tiếp
- app/components/Counter.tsx — Client Component với
"use client", dùng useState - app/layout.tsx — Server Component, chỉ layout chung
Server Component có thể fetch dữ liệu từ API hoặc database ngay trong body hàm, không cần useEffect. Điều này đơn giản hóa đáng kể code so với cách truyền thống.
Lợi Ích Chính
1. Nhẹ hơn: Chỉ code ở Client Components mới được gửi JS về trình duyệt. Server Components không ảnh hưởng đến bundle size.
2. SEO tốt hơn: HTML được render đầy đủ ở server, bot tìm kiếm đọc được nội dung ngay.
3. Đơn giản hơn: Không cần dùng useEffect để fetch data trong Server Components — lấy dữ liệu trực tiếp trong component.
4. Streaming: Kết hợp với Suspense, render nội dung từng phần — người dùng thấy loading skeleton ở phần đang tải, phần khác hiển thị ngay.
Lưu Ý Khi Chuyển Đổi
Khi chuyển từ ứng dụng CSR sang RSC, cần chú ý:
- Hydration mismatch: Đảm bảo HTML server render trùng với JS client render.
- Cookie và auth: Server Components nhận cookie qua Headers API, không qua document.cookie.
- Use client boundary: Mỗi
"use client"là một boundary — dữ liệu phải serialize qua boundary này, không truyền được hàm hay đối tượng phức tạp.
Nhiều framework như Next.js, React Router (v7), và TanStack Start đều hỗ trợ RSC sẵn. Bạn không cần tự thiết lập server — chỉ cần chọn framework phù hợp.
Kết Luận
React Server Components không chỉ là tính năng mới — nó thay đổi cách suy nghĩ về kiến trúc ứng dụng React. Bằng việc phân tách rõ ràng giữa server và client, developer có thể xây dựng ứng dụng nhanh hơn, nhẹ hơn, và thân thiện với SEO hơn. Nếu bạn đang dùng Next.js App Router, bạn đã sử dụng RSC mỗi ngày. Bây giờ là lúc hiểu sâu hơn để tận dụng tối đa sức mạnh của nó.
Tham khảo: React Docs — Creating a React App · Next.js — React Server Components
