Tối ưu hiệu suất với React Server Components

Tối ưu hiệu suất với React Server Components (RSC)

React Server Components (RSC) là một sự thay đổi mô hình lớn trong thế giới React, đặc biệt là với Next.js App Router. RSC cho phép bạn render component trực tiếp trên server và gửi thẳng HTML xuống client, thay vì gửi khối JavaScript nặng nề.

1. Lợi ích vượt trội của Server Components

• Zero Bundle Size: Các component chỉ chạy trên server sẽ không được đóng gói vào JS gửi xuống client.
• Truy cập trực tiếp Database: Bạn có thể query database hoặc gọi API bảo mật ngay trong component mà không lo lộ API key, bỏ qua bước xây dựng API Router trung gian.

2. Khi nào nên dùng Client Components?

Bạn chỉ nên thêm chỉ thị "use client" khi cần xử lý tương tác của người dùng (onClick, onChange) hoặc khi cần dùng các React Hook (useState, useEffect, useContext).

// server-component.tsx (Mặc định trong thư mục app)
import db from '@/lib/db';
import ClientButton from './client-button';

export default async function ProductPage({ params }) {
  // Query trực tiếp DB không cần thông qua API Route
  const product = await db.product.findById(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <ClientButton productId={product.id} />
    </div>
  );
}

3. Xóa bỏ Network Waterfall với Suspense

Thay vì block toàn bộ trang chờ dữ liệu API, hãy dùng Suspense để stream từng phần giao diện HTML xuống ngay khi dữ liệu đã sẵn sàng trên Server.

import { Suspense } from 'react';
import ProductReviews from './reviews';
import LoadingSkeleton from './skeleton';

export default function Page() {
  return (
    <main>
      <h1>Sản phẩm của chúng tôi</h1>
      {/* Giao diện chính hiển thị ngay lập tức, Reviews tải ngầm */}
      <Suspense fallback={<LoadingSkeleton />}>
        <ProductReviews />
      </Suspense>
    </main>
  );
}

Với kiến trúc RSC, điểm số Lighthouse của bạn sẽ dễ dàng đạt 100 điểm Performance nhờ Core Web Vitals (đặc biệt là LCP và FID) được tối ưu triệt để.