Kiểm Soát Render Budget & Streaming SSR Với Next.js App Router Ở Quy Mô Lớn

Ảo Tưởng Về Tốc Độ Của SPA Truyền Thống

Trong thập kỷ qua, các ứng dụng web dạng Single Page Application (SPA) đã khiến kích thước file JavaScript gửi tới trình duyệt phình to từ 100KB lên tới 3MB - 5MB.

Khi một thiết bị di động tầm trung tải một trang web như vậy:

• Thời gian tải mạng (Network Transfer): Mất 1-3 giây ở mạng 4G.
• Thời gian giải mã & biên dịch (Parse & Compile): CPU của điện thoại phải làm việc cật lực để đọc hàng trăm nghìn dòng mã JS, gây nghẽn Main Thread.
• Quá trình Hydration: Trình duyệt phải duyệt lại toàn bộ Virtual DOM để gắn kết các Event Listener, khiến người dùng nhấn vào nút nhưng giao diện bị đơ (Hiện tượng chỉ số INP - Interaction to Next Paint đỏ lòm).

Kiến Trúc Cô Lập Leaf Client Components

Nguyên tắc quan trọng nhất khi làm việc với Next.js App Router là: Mọi component mặc định là React Server Component (RSC). Chỉ khai báo directive "use client" ở các thành phần lá (Leaf Nodes) thực sự cần tương tác DOM, State nội bộ hoặc Browser APIs.

code(6 dòng)
Sao chép
Page (Server Component - 0 KB JS)
  ├── Header & Navigation (Server Component - 0 KB JS)
  ├── Hero Section (Server Component - 0 KB JS)
  │     └── ThemeToggle ("use client" - Leaf Component 2 KB JS)
  ├── Article Markdown (Server Component - 0 KB JS)
  └── Footer (Server Component - 0 KB JS)

Đoạn Mã Mẫu Phân Tách Đúng Cách

tsx(28 dòng)
Sao chép
// Page.tsx (Server Component - Chạy 100% trên Node.js/Edge Runtime)
import { Suspense } from 'react';
import { getArticleBySlug } from '@/lib/db';
import { MarkdownRenderer } from '@/components/markdown-renderer';
import { TableOfContents } from '@/components/toc';
import { LikeButton } from '@/components/like-button'; // Leaf Client Component

export default async function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const article = await getArticleBySlug(slug);

  return (
    <main className="max-w-4xl mx-auto py-12 px-6">
      <h1 className="text-4xl font-bold tracking-tight">{article.title}</h1>
      
      {/* Table of contents tạo sẵn trên server, 0 bytes JS */}
      <TableOfContents content={article.content} />
      
      {/* Toàn bộ markdown render thành HTML tĩnh */}
      <MarkdownRenderer content={article.content} />

      {/* Chỉ có nút like mới cần hydrate JS vào browser */}
      <Suspense fallback={<div className="h-10 w-24 bg-zinc-200 animate-pulse rounded" />}>
        <LikeButton articleId={article.id} initialLikes={article.likes} />
      </Suspense>
    </main>
  );
}

Streaming SSR Với HTTP Chunked Transfer Encoding

Trước đây, Server-Side Rendering truyền thống yêu cầu máy chủ phải đợi tất cả các database query hoàn tất mới bắt đầu gửi response HTML về cho trình duyệt. Nếu có một API chậm (ví dụ: query phân tích hoặc danh sách bài viết liên quan mất 800ms), người dùng sẽ phải nhìn màn hình trắng xóa trong suốt 800ms đó (TTFB cực cao).

Với React 19 và Next.js Streaming SSR:

1. Máy chủ lập tức gửi phần khung HTML tĩnh (Navigation, Title, Shell) trong vòng 20ms.
2. Phần dữ liệu chậm được bọc trong <Suspense fallback={<Skeleton />}>.
3. Trình duyệt render khung giao diện ngay lập tức.
4. Khi dữ liệu chậm hoàn tất, máy chủ stream tiếp đoạn mã HTML bổ sung qua cùng một kết nối HTTP (Transfer-Encoding: chunked) và tự động chèn vào đúng vị trí của Skeleton.

Bảng Đối Soát Chỉ Số Core Web Vitals