Kiến Trúc Partial Prerendering (PPR) Trong Next.js 15: Kết Hảo Giữa Static Shell và Dynamic Streaming

1. Bối Cảnh & Sự Ra Đời Của Partial Prerendering (PPR)

Trong phát triển web hiện đại, các kỹ sư luôn phải đối mặt với bài toán đánh đổi giữa Static Site Generation (SSG) và Server-Side Rendering (SSR). SSG mang lại tốc độ tải trang tức thì (TTFB dưới 30ms) nhờ lưu trữ trên CDN, nhưng không thể hiển thị dữ liệu thời gian thực cho từng người dùng (như giỏ hàng, thông tin cá nhân). Ngược lại, SSR giải quyết được dữ liệu động nhưng bắt buộc toàn bộ trang web phải chờ server xử lý xong mới trả về HTML.

Next.js 15 cùng React 19 giải quyết dứt điểm nghịch lý này bằng kiến trúc Partial Prerendering (PPR): Render trước phần khung tĩnh (Static Shell) tại build-time và stream song song các thành phần động (Dynamic Holes) qua giao thức HTTP Streaming.

2. Cơ Chế Tách Shell Tĩnh & Streaming Lỗ Động (Dynamic Hole)

Khi kích hoạt PPR, Next.js phân tích cây component và tự động phân định:

• Static Shell: Header, Footer, Sidebar, Layout và hình ảnh thương hiệu được biên dịch sẵn thành static HTML lưu tại Edge CDN.
• Dynamic Holes: Các component được bao bọc bởi <Suspense> chứa các lệnh gọi dữ liệu bất đồng bộ (cookies(), headers(), database query) sẽ được stream xuống máy khách ngay khi tính toán xong.

3. Mã Nguồn Cấu Hình Next.js 15 & React 19 Suspense

Dưới đây là ví dụ cấu hình trang Dashboard thương mại điện tử chuẩn PPR trong Next.js 15 App Router:

1// app/dashboard/page.tsx
2import { Suspense } from "react";
3import { HeaderStatic } from "@/components/header-static";
4import { ProductGridStatic } from "@/components/product-grid-static";
5import { UserCartDynamic } from "@/components/user-cart-dynamic";
6import { LiveAnalyticsDynamic } from "@/components/live-analytics-dynamic";
7import { SkeletonCart, SkeletonAnalytics } from "@/components/skeletons";
8
9// Kích hoạt tính năng Partial Prerendering cho route này
10export const experimental_ppr = true;
11
12export default function DashboardPage() {
13  return (
14    <div className="min-h-screen bg-slate-950 text-slate-100">
15      {/* Static Shell: Trả về ngay lập tức từ Edge CDN trong 15ms */}
16      <HeaderStatic title="E-Commerce Enterprise Control Panel" />
17      
18      <main className="max-w-7xl mx-auto p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
19        <section className="md:col-span-2 space-y-6">
20          <ProductGridStatic />
21          
22          {/* Dynamic Hole 1: Stream dữ liệu phân tích thời gian thực */}
23          <Suspense fallback={<SkeletonAnalytics />}>
24            <LiveAnalyticsDynamic />
25          </Suspense>
26        </section>
27
28        <aside className="space-y-6">
29          {/* Dynamic Hole 2: Stream giỏ hàng và dữ liệu cá nhân của user */}
30          <Suspense fallback={<SkeletonCart />}>
31            <UserCartDynamic />
32          </Suspense>
33        </aside>
34      </main>
35    </div>
36  );
37}

Cấu hình kích hoạt trong file next.config.ts:

1// next.config.ts
2import type { NextConfig } from "next";
3
4const nextConfig: NextConfig = {
5  experimental: {
6    ppr: "incremental", // Cho phép bật PPR từng trang theo nhu cầu
7    reactCompiler: true,
8  },
9  images: {
10    formats: ["image/avif", "image/webp"],
11  },
12};
13
14export default nextConfig;

4. Bảng Đo Lường Hiệu Năng: SSG vs SSR vs PPR

Dưới đây là kết quả benchmark thực tế đo lường trên mạng 4G với độ trễ RTT 60ms:

5. Khuyến Nghị Kiến Trúc Khi Áp Dụng PPR Cho Doanh Nghiệp

• Định vị ranh giới Suspense chuẩn xác: Không nên bọc <Suspense> ở tầng quá cao ngoài root layout, hãy đặt càng gần lá component động càng tốt để tối đa hóa diện tích Static Shell.
• Kiểm soát Cache Invalidation: Tận dụng revalidateTag và unstable_cache để tái sử dụng kết quả truy vấn đắt đỏ giữa các phiên làm việc của người dùng.