React Server Components (RSC): Cơ chế hoạt động ngầm và 4 sai lầm khiến bundle size phình to

Cuộc cách mạng kiến trúc của React 19#

React Server Components (RSC) thay đổi hoàn toàn cách chúng ta tư duy về ứng dụng React: Component có thể chạy trực tiếp trên server, truy vấn thẳng vào database mà không cần tạo REST endpoint trung gian, và hoàn toàn không bị đóng gói vào bundle JavaScript gửi về cho người dùng.

Tuy nhiên nếu hiểu sai cơ chế ngầm, bạn sẽ vô tình biến website của mình trở nên nặng nề hơn trước.

4 Sai lầm kinh điển khi áp dụng RSC#

1. Đặt directive 'use client' ở component quá cao trong cây thư mục#

Khi bạn đặt 'use client' ở một component cha, toàn bộ các component con được import bên trong nó đều tự động bị biến thành Client Components và bị kéo vào bundle JS của trình duyệt!

• Khắc phục: Đẩy directive 'use client' xuống lá ngoài cùng (Leaf Components) chứa tương tác nhỏ nhất có thể.

2. Không tận dụng cơ chế Composition (Truyền Server Component qua children)#

Bạn hoàn toàn có thể lồng một Server Component vào bên trong một Client Component thông qua prop children:

// ClientModal.tsx ('use client')
export default function ClientModal({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
  return isOpen ? <div className="modal">{children}</div> : null;
}

// Page.tsx (Server Component)
export default function Page() {
  return (
    <ClientModal>
      {/* HeavyServerList vẫn chạy 100% trên server, zero bundle JS! */}
      <HeavyServerList />
    </ClientModal>
  );
}

3. Vô tình import thư viện Node.js vào Client Component#

Import nhầm thư viện như fs, crypto hoặc pg vào file có 'use client' sẽ gây lỗi build vỡ ứng dụng ngay lập tức. Hãy cài đặt package server-only để bắt lỗi từ sớm.

4. Fetching dữ liệu kiểu thác nước (Waterfall Fetching)#

Tránh việc await tuần tự nhiều Server Component lồng nhau. Hãy dùng Promise.all() hoặc kết hợp với thẻ <Suspense> để dữ liệu tải song song.

Góc thảo luận#

Anh em đánh giá thế nào về độ dốc học tập (learning curve) của RSC? Có thấy việc phân chia ranh giới Client/Server làm code khó bảo trì hơn không?

Xem thêm nội dung liên quan:

• Học lộ trình React & Frontend Chuyên sâu
• Bộ đề trắc nghiệm ReactJS