Sự thay đổi mô hình của React Server Components

Trong suốt thập kỷ qua, React đã đồng nghĩa với việc kết xuất phía máy khách (CSR). Các nhà phát triển đã quen với việc gửi các gói JavaScript lớn đến trình duyệt, tìm nạp dữ liệu trên máy khách và quản lý các trạng thái toàn cục phức tạp chỉ để hiển thị một trang. Mặc dù các kỹ thuật như Kết xuất phía máy chủ (SSR) và Tạo trang tĩnh (SSG) đã giúp cải thiện thời gian tải ban đầu, nhưng chúng vẫn phụ thuộc nhiều vào quá trình hydrate phía máy khách, điều này thường dẫn đến các payload JavaScript cồng kềnh và khả năng tương tác chậm chạp trên các thiết bị cấu hình thấp.

Giờ đây, hệ sinh thái React đang trải qua một trong những sự chuyển đổi quan trọng nhất kể từ khi giới thiệu Hooks: sự chấp nhận rộng rãi của React Server Components (RSC). RSC đại diện cho một sự thay đổi mô hình cơ bản trong cách chúng ta kiến trúc, xây dựng và tối ưu hóa các ứng dụng React.

Trong bài viết chuyên sâu này, chúng ta sẽ khám phá React Server Components thực sự là gì, các vấn đề cụ thể mà chúng giải quyết và cách chúng thu hẹp khoảng cách lịch sử giữa cơ sở hạ tầng phía máy chủ mạnh mẽ và khả năng tương tác phía máy khách động.

Suy nghĩ lại về Môi trường kết xuất

Để hiểu được tác động của React Server Components, trước tiên chúng ta phải hiểu vòng đời kết xuất React truyền thống. Trong một ứng dụng React tiêu chuẩn (ngay cả ứng dụng sử dụng SSR), các component cuối cùng được thiết kế để chạy trong trình duyệt. Khi người dùng điều hướng đến một trang, máy chủ có thể gửi HTML ban đầu, nhưng trình duyệt vẫn phải tải xuống các component React tương ứng (và tất cả các dependency của chúng), phân tích cú pháp JavaScript và "hydrate" trang để làm cho nó có tính tương tác.

React Server Components thách thức hành vi mặc định này bằng cách định nghĩa rõ ràng các component chỉ thực thi trên máy chủ. Chúng không bao giờ gửi mã của mình đến máy khách. Sự khác biệt đơn giản này có ý nghĩa rất lớn đối với kiến trúc ứng dụng.

Bằng cách đưa việc kết xuất trở lại máy chủ — nhưng vẫn duy trì mô hình dựa trên component mà chúng ta yêu thích — các nhà phát triển có thể tận dụng trực tiếp cơ sở hạ tầng máy chủ mà không làm lộ thông tin xác thực nhạy cảm hoặc làm phình to gói máy khách.

Lợi ích cốt lõi của Server Components

React Server Components mang lại một số lợi thế quan trọng giúp cải thiện đáng kể cả trải nghiệm của nhà phát triển và trải nghiệm của người dùng cuối.

1. Không ảnh hưởng đến kích thước gói

Đây có lẽ là tính năng được ca ngợi nhất của RSC. Vì Server Components không bao giờ thực thi trong trình duyệt, mã nguồn của chúng và tất cả các dependency của chúng hoàn toàn bị loại trừ khỏi gói JavaScript được gửi đến người dùng.

Hãy tưởng tượng một component nhập một thư viện phân tích cú pháp markdown nặng hoặc một tiện ích định dạng ngày tháng khổng lồ như Moment.js. Trong một ứng dụng React truyền thống, những thư viện nặng đó được tải xuống và phân tích cú pháp bởi trình duyệt của mỗi người dùng. Với Server Components, công việc nặng nhọc đó hoàn toàn diễn ra trên máy chủ. Máy chủ chỉ đơn giản gửi giao diện người dùng được kết xuất trước (một định dạng DOM ảo được tuần tự hóa) đến máy khách. Máy khách nhận được giao diện người dùng cuối cùng mà không cần tải xuống một byte nào của các thư viện được sử dụng để tạo ra nó.

2. Truy cập trực tiếp vào Backend

Vì Server Components chạy nguyên bản trên máy chủ, chúng có quyền truy cập trực tiếp, an toàn vào cơ sở hạ tầng backend. Bạn có thể truy vấn cơ sở dữ liệu của mình, tương tác với hệ thống tệp của mình hoặc giao tiếp với các microservice nội bộ trực tiếp trong mã component của bạn.

// Example of a Server Component
import db from './database';

export default async function UserProfile({ userId }) {
  // Direct database access! No API route needed.
  const user = await db.users.find(userId);
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

Điều này loại bỏ nhu cầu xây dựng các tuyến API trung gian chỉ để tìm nạp dữ liệu cho frontend. Nó đơn giản hóa kiến trúc và loại bỏ các vấn đề thác nước mạng liên quan đến việc tìm nạp dữ liệu phía máy khách.

3. Tự động chia tách mã

Trong các ứng dụng React truyền thống, các nhà phát triển phải tự triển khai chia tách mã bằng cách sử dụng React.lazy() và các import động để ngăn gói JavaScript ban đầu trở nên quá lớn.

React Server Components thay đổi cơ bản điều này. Bởi vì máy chủ quyết định giao diện người dùng nào cần được kết xuất, nó có thể tự động và thông minh truyền các Client Components cần thiết đến trình duyệt chính xác khi chúng cần. Ranh giới giữa logic máy chủ và khả năng tương tác của máy khách xử lý việc chia tách mã cho bạn, giảm đáng kể gánh nặng nhận thức cho nhà phát triển.

Hiểu rõ ranh giới: Máy chủ và Máy khách

Có một quan niệm sai lầm phổ biến rằng React Server Components có nghĩa là thay thế Client Components. Trên thực tế, chúng được thiết kế để hoạt động cùng nhau một cách cộng sinh.

• Server Components chịu trách nhiệm tìm nạp dữ liệu, truy cập backend và kết xuất giao diện người dùng tĩnh hoặc không tương tác. Chúng không thể sử dụng state (useState), effects (useEffect) hoặc các API chỉ dành cho trình duyệt (như window hoặc localStorage).
• Client Components là các component React truyền thống mà chúng ta đã quen thuộc. Chúng xử lý khả năng tương tác, state, trình nghe sự kiện (như onClick) và các API trình duyệt.

Nghệ thuật xây dựng các ứng dụng React hiện đại nằm ở việc đặt chỉ thị "use client" một cách thông minh để vẽ ranh giới giữa máy chủ và máy khách. Mục tiêu là đẩy càng nhiều kết xuất càng tốt đến Server Components ở đầu cây, và chỉ đẩy các đảo tương tác (Client Components) xuống các lá của cây.

Lợi thế của Streaming

RSC tận dụng mạnh mẽ khả năng kết xuất đồng thời và streaming của React. Thay vì chờ toàn bộ trang được kết xuất trên máy chủ trước khi gửi phản hồi, máy chủ có thể truyền các phần của giao diện người dùng đến trình duyệt ngay khi chúng sẵn sàng.

Điều này có nghĩa là người dùng có thể thấy bố cục, điều hướng và nội dung tĩnh ngay lập tức, trong khi các phần phụ thuộc dữ liệu nặng hơn của trang tải dần dần. Khi kết hợp với React Suspense, các nhà phát triển có thể tạo ra trải nghiệm người dùng cực kỳ mượt mà, nhanh chóng và phản hồi nhanh, ngay cả trên các kết nối chậm.

Nhìn về phía trước

Sự chuyển đổi sang React Server Components đại diện cho sự trưởng thành của hệ sinh thái React. Bằng cách thừa nhận rằng không phải tất cả giao diện người dùng đều cần tương tác, và bằng cách tận dụng sức mạnh của môi trường máy chủ, React đang giải quyết vấn đề phình to JavaScript đã gây khó khăn cho phát triển web hiện đại.

Các framework như Next.js (với App Router) và Waku đã đầu tư mạnh vào kiến trúc mới này, chứng minh rằng RSC đã sẵn sàng cho sản xuất. Mặc dù đường cong học tập đòi hỏi một sự thay đổi tư duy trong cách chúng ta cấu trúc các component và xử lý dữ liệu, nhưng những cải tiến về hiệu suất, sự đơn giản và trải nghiệm người dùng mang lại khiến React Server Components trở thành một sự thay đổi mang tính quyết định trong tương lai của phát triển web.

Bạn cũng có thể thích

• React Server Components vs Client Components: Phân tích chuyên sâu
• Hiểu về sự không khớp Hydration của React và Server Components
• Next.js Server Actions
• Xử lý biểu mẫu trong Next.js 14: Server Actions vs Client Components