Tối ưu Payload dung lượng HTML trong React Server Components (RSC): Giảm TTFB & LCP cho trang danh mục 100.000 sản phẩm

Trong các trang web thương mại điện tử hoặc trang danh mục quy mô lớn hiển thị hàng trăm sản phẩm (như trang Danh mục sản phẩm, Trang kết quả tìm kiếm), một sự cố hiệu năng nghiêm trọng thường xuyên xảy ra nhưng ít lập trình viên chú ý: Dung lượng tệp HTML trả về từ Server quá khổng lồ (HTML Payload Bloat).

Khi bạn render một trang danh mục chứa 100 sản phẩm bằng React Server Components (RSC), Next.js không chỉ trả về cây HTML hiển thị văn bản mà còn trả về cả một chuỗi dữ liệu ngầm gọi là RSC Payload (Flight Data) để phục vụ cơ chế Hydration ở Client-side. Kết quả là file HTML có thể phình to lên tới 5MB - 10MB! Điều này làm sụt giảm nghiêm trọng thời gian phản hồi Server (TTFB) và kéo tụt điểm Core Web Vitals. Bài viết này sẽ hướng dẫn bạn kỹ thuật tối ưu RSC Payload.

1. RSC Payload trong Next.js App Router là gì? Tại sao nó lại làm phình to HTML?

RSC Payload là định dạng chuỗi văn bản dạng cây JSON nén được Next.js tự động tạo ra và nhúng vào cuối file HTML dưới dạng các thẻ <script>self.__next_f.push(...)</script>.

RSC Payload chứa 2 thành phần chính:

• Kết quả rendered của các React Server Components.
• Các thuộc tính Props được truyền từ Server Components xuống Client Components (đánh dấu 'use client').

Cạm bẫy gây phình to HTML: Khi bạn lấy toàn bộ đối tượng sản phẩm từ Database (chứa 50 thuộc tính như mô tả chi tiết, hình ảnh biến thể, lịch sử cập nhật, dữ liệu kho) và truyền nguyên đối tượng đó vào một Client Component con (như nút AddToCartButton product={product}), toàn bộ 50 thuộc tính đó sẽ bị biến thành chuỗi text nhúng vào RSC Payload trong file HTML!

2. Tác hại trực tiếp của HTML Payload phình to tới thứ hạng SEO

Chỉ số SEO & Hiệu năng	Trang có RSC Payload chưa tối ưu (10MB HTML)	Trang đã Tối ưu hóa RSC Payload (150KB HTML)
TTFB (Time to First Byte)	Chậm (> 1.200ms) do Server tốn CPU serialize chuỗi JSON khổng lồ.	Siêu tốc (< 100ms). Server trả về Byte dữ liệu đầu tiên tức thì.
LCP (Largest Contentful Paint)	Trình duyệt mất 3-5 giây để nạp xong file HTML 10MB trước khi vẽ ảnh chính.	Hiển thị ảnh LCP mượt mà trong vòng 0.8 giây. View Cách tối ưu khối ảnh LCP PageSpeed.
Crawl Budget của Googlebot	Googlebot bị nghẽn băng thông nạp file HTML nặng, giảm tần suất cào trang. Read Tối ưu Crawl Budget Googlebot.	Googlebot cào hàng ngàn trang danh mục trong vài giây mà không tốn tài nguyên.

3. 4 Kỹ thuật Tối ưu hóa RSC Payload Cắt giảm 70% Dung lượng HTML

Kỹ thuật 1: Chỉ truyền đúng các thuộc tính Primitives cần thiết xuống Client Component

Đây là quy tắc Vàng quan trọng nhất. Thay vì truyền nguyên đối tượng product khổng lồ vào Client Component, hãy chỉ trích xuất đúng các thuộc tính id, price và title:

// ❌ SAI LẦM: Truyền nguyên object product (chứa 50 thuộc tính rác vào RSC Payload)
export default function ProductCard({ product }) {
  return (
    <div className="border p-4">
      <h3>{product.title}</h3>
      <AddToCartButton product={product} />
    </div>
  );
}

// ✅ CHUẨN TỐI ƯU: Chỉ truyền id và price cần thiết xuống Client Component
export default function ProductCardOptimized({ product }) {
  return (
    <div className="border p-4">
      <h3>{product.title}</h3>
      {/* Chỉ truyền id và price, giúp cắt giảm 95% dung lượng RSC Payload! */}
      <AddToCartButton productId={product.id} price={product.price} />
    </div>
  );
}

Kỹ thuật 2: Đẩy tối đa logic hiển thị về Server Component (Server-first UI)

Kiểm tra xem các Component trong trang danh mục có thực sự cần thiết phải gắn 'use client' không. Nếu Component đó chỉ hiển thị nhãn giá, thẻ Tag hoặc ảnh hình đại diện mà không có sự kiện click JS, hãy giữ nó là Server Component thuần túy. Server Component không sinh ra mã Hydration ngầm ở Client!

Kỹ thuật 3: Phân trang & Tải lùiLazy Loading cho Danh mục sản phẩm lớn

Đừng bao giờ render 200 sản phẩm trên cùng 1 trang HTML đợt đầu. Giới hạn hiển thị 24 sản phẩm/trang đợt 1 và áp dụng kỹ thuật Infinite Scroll hoặc Phân trang chuẩn <a href="?page=2"> cho các sản phẩm tiếp theo. Read Xử lý Canonical Tag cho URL phân trang.

Kỹ thuật 4: Tự động Nén Gzip / Brotli cho HTTP Response ở lớp Edge Worker

Bật cơ chế nén Brotli nén cấp độ cao tại Cloudflare Edge Worker để tự động co nén file HTML trả về trước khi gửi tới trình duyệt Googlebot. Read Edge Computing Cloudflare Workers cho Next.js.

4. Kiểm tra Dung lượng HTML và Báo cáo RSC Payload qua Chrome DevTools

• Mở Chrome DevTools (F12) ➔ Chuyển sang tab Network ➔ Chọn lọc thẻ Doc (HTML).
• Nạp lại trang và xem mục Size / Transferred. Dung lượng file HTML lý tưởng cho một trang danh mục sản phẩm chuẩn SEO phải dưới 200 KB.
• Nếu dung lượng HTML > 1 MB, hãy mở tab Preview và kiểm tra đoạn mã script self.__next_f.push để tìm ra đối tượng data nào đang bị truyền thừa xuống Client.

Kết luận

Tối ưu hóa dung lượng HTML Payload trong React Server Components là một kỹ năng tinh tế nâng tầm lập trình viên Next.js chuyên nghiệp. Việc loại bỏ triệt để các dữ liệu thừa trong RSC Payload sẽ giúp website đạt thời gian phản hồi TTFB siêu tốc 0ms, nâng cao điểm số Core Web Vitals và đưa các trang danh mục sản phẩm dẫn đầu bảng xếp hạng Google.