React Server Components: Kiến trúc mới cho ứng dụng web hiện đại

React Server Components là gì?

React Server Components (RSC) là kiến trúc ứng dụng mới được thiết kế bởi đội ngũ React, cho phép chạy component phía server trước khi gửi HTML đến trình duyệt. Server Component không xuất hiện trong JavaScript bundle gửi đến client, giúp giảm đáng kể kích thước bundle và cải thiện tốc độ tải trang. Đây là bước tiến quan trọng nhất của React sau khi ra mắt Hooks và Concurrent Features.

Mục tiêu cốt lõi của RSC là kết hợp mô hình request/response đơn giản của Multi-Page App với tính tương tác mượt mà của Single-Page App. Developer không phải tạo API endpoint riêng cho mỗi trang — Server Component có thể đọc trực tiếp file system, query database, hoặc gọi service nội bộ trên server mà không lo về bảo mật thông tin nhạy cảm.

Cách RSC hoạt động trong React 19

Trong React 19, mọi component mặc định đều là Server Component. Để chuyển sang Client Component, developer cần thêm "use client" directive ở đầu file. Server Component hỗ trợ async/await trực tiếp — đây là cách chính để fetch data, thay vì phải dùng useEffect hay getServerSideProps như trước.

Ví dụ đơn giản: một Server Component có thể truy vấn PostgreSQL trực tiếp bằng hàm async, truyền kết quả xuống Client Component thông qua props. Client Component xử lý các phần tương tác như button clicks, form inputs — trong khi phần lớn markup render trên server.

Đội ngũ lập trình viên hợp tác trên nhiều laptop trong dự án web React — Hệ thống server xử lý request từ nhiều thiết bị client trong kiến trúc RSC

So sánh Server Component và Client-Side Rendering

So với Client-Side Rendering (CSR) truyền thống, RSC mang lại nhiều ưu điểm rõ rệt:

Giảm bundle size: Server Component không nằm trong JS bundle, giúp bundle nhỏ hơn 30-50% cho các ứng dụng phức tạp.
Tốc độ tải trang: HTML render sẵn trên server nên nội dung hiển thị ngay lập tức (First Contentful Paint tốt hơn).
Truy cập trực tiếp data: Không cần REST API hay GraphQL layer — đọc database trực tiếp từ component.
SEO tự nhiên: HTML có sẵn trên server nên search engine index dễ dàng.
Streaming render: Kết hợp với Suspense, RSC cho phép stream từng phần nội dung đến client.

Server Actions trong React 19

Server Actions là cơ chế cho phép client gọi hàm chạy trên server — tương tự RPC nhưng tích hợp liền mạch trong React. Developer định nghĩa Server Action bằng "use server" directive, sau đó gọi trực tiếp từ Client Component. Form xử lý trở nên đơn giản: không cần tạo API endpoint riêng, không cần state management phức tạp.

Hệ thống server web trong data center xử lý React Server Components — Luồng dữ liệu trong kiến trúc React Server Components với Server Actions

Server Actions hỗ trợ Progressive Enhancement — form vẫn hoạt động trước khi JavaScript load xong. Khi user submit form, request gửi trực tiếp đến server và function chạy trên server xử lý mutation. Kết quả trả về trigger re-render chỉ cho phần affected component, không cần reload toàn trang.

Hỗ trợ từ framework và hệ sinh thái

Next.js App Router là framework đầu tiên tích hợp sâu RSC. Từ phiên bản 13, Next.js hỗ trợ Server Component theo chuẩn RFC mà React team đã ratify. Remix, Waku, và Astro cũng đang nghiên cứu tích hợp RSC. Điểm quan trọng: RSC là specification, không phụ thuộc vào bất kỳ framework nào, nên developer có thể xây dựng custom framework nếu cần.

React Compiler (trước đây gọi là React Forget) — optimizing compiler được React team phát triển — cũng tối ưu hóa cả Server và Client Component. Compiler tự động memoize component, đảm bảo re-render chỉ xảy ra khi state thực sự thay đổi. Kết hợp với RSC, React Compiler giúp ứng dụng chạy hiệu quả cả trên server lẫn client.

Khi nào nên dùng Server Component, khi nào dùng Client Component

Quyết định quan trọng nhất khi làm việc với RSC là xác định ranh giới giữa server và client. Nguyên tắc chung: càng nhiều code chạy trên server càng tốt. Phần nào không cần tương tác trực tiếp với người dùng — hiển thị dữ liệu, kết xuất nội dung tĩnh, truy vấn database — đều nên là Server Component.

Client Component chỉ cần thiết khi người dùng tương tác: nhập liệu, click, kéo thả, hoặc sử dụng các browser API như localStorage, window, navigator. Một mẹo phổ biến từ cộng đồng: giữ component trung gian (wrapper) là Server Component, và chỉ đánh dấu "use client" ở phần lá (leaf) thực sự tương tác. Cách này giữ bundle nhỏ mà vẫn linh hoạt.

Streaming và Suspense trong RSC

Một trong những lợi ích ít được nhắc đến của RSC là khả năng streaming HTML theo từng phần. Server Component có thể trả về Promise cho một phần nội dung, và React sẽ stream phần đó xuống client ngay khi sẵn sàng — trong khi phần còn lại của trang vẫn đang render trên server. Kết hợp với Suspense boundary, developer có thể hiển thị loading state tinh tế cho từng phần mà không làm chậm toàn trang.

Streaming đặc biệt hữu ích cho các trang có phần nội dung nặng (báo cáo, dashboard) và phần nội dung nhẹ (header, navigation). Thay vì đợi toàn bộ trang render mới gửi, browser nhận được header và nội dung chính ngay, sau đó nội dung phụ xuất hiện dần khi server xử lý xong.

Cache và revalidation dữ liệu

React 19 bổ sung các API cache dữ liệu chuyên dụng cho RSC: cache(), revalidatePath(), revalidateTag(). Những API này cho phép server lưu kết quả fetch data và tái sử dụng giữa nhiều request, giảm tải database đáng kể. Khi dữ liệu thay đổi, developer có thể invalidation có chọn lọc — chỉ xóa cache của đường dẫn hoặc tag liên quan, thay vì toàn bộ.

Trong Next.js App Router, mặc định các Server Component fetch data đều được cache. Tùy chọn next: { cache: 'no-store' } hoặc fallback revalidate giúp kiểm soát chính xác thời điểm dữ liệu cũ. Điều này giảm rất nhiều code so với mô hình cũ: trước đây developer phải tự triển khai cache layer, Redis, hoặc CDN config — giờ chỉ cần khai báo trong component.

Những hạn chế cần biết

RSC cũng có những hạn chế cần lưu ý. Thứ nhất, không thể dùng các thư viện phụ thuộc vào browser API trong Server Component — phải tách riêng phần client. Thứ hai, việc debug đôi khi khó khăn hơn vì code chạy ở hai môi trường khác nhau. Thứ ba, không phải thư viện npm nào cũng phân biệt rõ server/client — một số package chưa khai báo "use client" đúng cách và gây lỗi khi import từ Server Component.

Cuối cùng, cần nhớ rằng RSC không thay thế toàn bộ SSR truyền thống. SSR (Server-Side Rendering) vẫn cần thiết cho việc sinh HTML ban đầu; RSC tập trung vào việc giảm bundle và tối ưu data fetching. Hai khái niệm này bổ sung cho nhau, và các framework hiện đại kết hợp cả hai.

Kết luận

React Server Components là kiến trúc mặc định của web React hiện đại. Giảm bundle, cải thiện tốc độ, đơn giản hóa data fetching — những lợi ích này đủ lớn để mọi dự án React mới nên bắt đầu với RSC. Cộng đồng ngày càng nhiều best practice, tooling hỗ trợ hoàn thiện, và Next.js đã đưa RSC vào production cho hàng triệu trang web.

Bước tiếp theo của developer là thử nghiệm với project nhỏ, đo lường trước/sau khi chuyển sang RSC, và dần di chuyển các component không tương tác sang Server Component. Đừng cố chuyển đổi toàn bộ codebase một lần — RSC cho phép triển khai dần dần từng component một.

Hướng dẫn bắt đầu với RSC

Để bắt đầu sử dụng React Server Components:

Cài đặt Next.js phiên bản mới nhất: npx create-next-app@latest
Tạo file component trong thư mục app/ — mặc định là Server Component
Thêm "use client" ở đầu file nếu cần tương tác (click, input, state)
Sử dụng async/await trực tiếp trong Server Component để fetch data
Định nghĩa Server Action bằng "use server" để xử lý form và mutations

Tham khảo thêm: React Labs — March 2023, Next.js Server and Client Components, React Server Components RFC.