Hiểu thêm về React Server Components

Giới thiệu

React Server Components (RSC) là một tính năng mang tính đột phá giúp cải thiện hiệu suất bằng cách giảm lượng JavaScript tải xuống trình duyệt. Khác với các Component truyền thống, RSC chạy hoàn toàn trên server, giúp tối ưu hóa việc lấy dữ liệu và giảm tải cho frontend.

Bài viết này sẽ giúp bạn hiểu rõ về React Server Components, lợi ích của chúng, sự khác biệt so với Client Components truyền thống và cách sử dụng trong Next.js.

React Server Components là gì?

Thông thường, React render component trên trình duyệt bằng JavaScript. Nhưng với RSC, một số component được render trên server và gửi HTML về client, giúp giảm đáng kể kích thước bundle JavaScript.

Cách RSC hoạt động

RSC chạy trên server, thực hiện logic và gửi kết quả đã được serialize về client. Khác với Server-Side Rendering (SSR) gửi nguyên trang HTML đã render, RSC cho phép render từng phần và truyền dần xuống client.

Điều này giúp RSC có thể truy vấn dữ liệu trực tiếp từ database hoặc API mà không cần thêm request từ client, giảm độ trễ và tối ưu hiệu suất.

Lợi ích của RSC

• Giảm JavaScript tải xuống client: Không gửi JavaScript thừa về trình duyệt, giúp trang tải nhanh hơn.
• Cải thiện SEO: Nội dung render sẵn trên server giúp công cụ tìm kiếm dễ dàng thu thập dữ liệu.
• Tối ưu hóa việc lấy dữ liệu: Fetch dữ liệu trực tiếp trên server, không cần gọi API từ client.
• Tích hợp dễ dàng: Có thể sử dụng cùng với Client Components khi cần.
• Tăng tốc độ tải trang: Gửi HTML đã render sẵn giúp người dùng thấy nội dung ngay lập tức.
• Giảm tải bộ nhớ trình duyệt: Trạng thái được xử lý trên server, giúp trình duyệt hoạt động mượt mà hơn.

Sử dụng React Server Components trong Next.js

Next.js 13+ hỗ trợ hoàn toàn RSC. Mặc định, tất cả component trong thư mục app/ của Next.js đều là Server Components, trừ khi bạn chỉ định là Client Component.

Ví dụ: Một Server Component đơn giản

// app/components/PostList.tsx (Mặc định là Server Component)
import { getPosts } from '@/lib/api';

export default async function PostList() {
  const posts = await getPosts();
  
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Khi nào cần dùng Client Component?

Một số component vẫn cần chạy trên client, như những component sử dụng useState, useEffect hoặc có event listener. Để chỉ định một component là Client Component, thêm 'use client' ở đầu file:

// app/components/Button.tsx
'use client';

import { useState } from 'react';

export default function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Click {count}</button>;
}

React Server Components vs. Server-Side Rendering

Nhiều người nhầm lẫn giữa React Server Components (RSC) và Server-Side Rendering (SSR). Dưới đây là bảng so sánh:

Khi nào nên sử dụng RSC?

React Server Components phù hợp khi bạn muốn giảm JavaScript chạy trên client. Một số trường hợp sử dụng phổ biến:

• Trang nội dung tĩnh: Blog, tài liệu, trang tin tức.
• Ứng dụng dashboard: Lấy dữ liệu lớn trên server mà không ảnh hưởng đến frontend.
• Website thương mại điện tử: Hiển thị danh sách sản phẩm theo thời gian thực mà không gửi nhiều script xuống client.
• Ứng dụng streaming: Tải dần nội dung để cải thiện trải nghiệm người dùng.

Tránh lỗi Hydration trong RSC

Khi kết hợp RSC với Client Components, cần chú ý tránh lỗi hydration mismatch, tức là nội dung render trên server khác với nội dung hiển thị trên client. Một số nguyên nhân phổ biến:

• Không sử dụng giá trị thay đổi theo thời gian như Date.now() hoặc Math.random() trong Server Components.
• Không render JSX không hợp lệ, chẳng hạn như <div> nằm trong <p>.
• Không sử dụng các API chỉ chạy trên client, ví dụ window, document, localStorage trong Server Components.
• Khi cần interactivity, hãy tách component đó thành Client Component bằng cách thêm 'use client'.

Kết luận

React Server Components giúp tăng hiệu suất bằng cách giảm tải JavaScript cho client. Khi kết hợp với Next.js, RSC giúp tối ưu trải nghiệm người dùng bằng cách cải thiện tốc độ tải trang và giảm tải cho trình duyệt. Hiểu rõ cách sử dụng RSC sẽ giúp ta xây dựng ứng dụng React nhanh hơn, nhẹ hơn và dễ bảo trì hơn.