Loading UI chán ngắt? Streaming giúp Web nhanh như chớp

Trong bài trước, ta thấy Server Component rất tuyệt. Nhưng nó có một điểm yếu chết người: Blocked Rendering.

Nếu API getProducts() mất 3 giây để phản hồi -> Người dùng sẽ thấy màn hình trắng tinh trong 3 giây. Họ sẽ tưởng web bị lỗi và thoát ra.

Giải pháp: Streaming (Truyền tải dòng chảy).

1. Instant Loading với loading.tsx

Cách đơn giản nhất. Tạo file loading.tsx cùng cấp với page.tsx.

app/
  dashboard/
    page.tsx      (Async Component - Chạy 3s)
    loading.tsx   (Skeleton UI - Hiện ngay lập tức)

Cơ chế:

1. Next.js gửi ngay lập tức loading.tsx về Browser (TTFB cực thấp).
2. Server tiếp tục fetch data cho page.tsx.
3. Khi có data -> Server gửi dòng HTML bổ sung xuống -> Browser thay thế Loading bằng Content thật.

2. Granular Streaming với <Suspense>

loading.tsx áp dụng cho TẤT CẢ trang. Nhưng nếu bạn chỉ muốn loading riêng phần "Review Khách Hàng" (nặng), còn phần "Thông tin sản phẩm" (nhẹ) thì hiện ngay?

Hãy chia nhỏ Component và dùng <Suspense>.

import { Suspense } from 'react';
import Reviews from './Reviews';
import ProductInfo from './ProductInfo';
import ReviewsSkeleton from './ReviewsSkeleton';

export default async function ProductPage() {
  const productData = getProduct(); // Nhanh (100ms)

  return (
    <main>
      {/* 1. Phần này hiện ngay sau 100ms */}
      <ProductInfo data={await productData} />

      {/* 2. Phần này hiện Skeleton trong khi chờ API Reviews (3s) */}
      <Suspense fallback={<ReviewsSkeleton />}>
        {/* Component này tự async fetch data bên trong nó */}
        <Reviews /> 
      </Suspense>
    </main>
  );
}

3. SEO có bị ảnh hưởng không?

Câu trả lời là KHÔNG. Streaming Server Rendering vẫn gửi đầy đủ HTML về cho Google Bot. Next.js đủ thông minh để chờ data load xong rồi mới đóng connection với Bot (hoặc Bot hiện đại đã biết chờ).

Kết luận

Streaming là ảo thuật của Backend. User cảm thấy web của bạn "nhanh" vì họ thấy giao diện ngay lập tức (dù là Skeleton), trong khi thực tế API vẫn đang chạy lạch bạch phía sau. Hãy dùng <Suspense> bọc lấy những component fetch data chậm (như Review, Analytic, Recommendation).