Partial Prerendering (PPR) là gì?

Question

Accepted Answer

**Partial Prerendering (PPR)** là một mô hình rendering của Next.js kết hợp **nội dung tĩnh và động trong một trang duy nhất** — phục vụ một khung tĩnh tức thì trong khi stream các phần động. Nó xóa nhòa ranh giới được-ăn-cả-ngã-về-không cũ giữa SSG và SSR. ## Vấn đề nó giải quyết Truyền thống một trang *hoặc là* hoàn toàn tĩnh (nhanh, nhưng không thể có nội dung theo từng người dùng) *hoặc là* hoàn toàn động (cá nhân hóa được, nhưng chậm hơn và không cache được). Trang thực tế thì pha trộn: một trang sản phẩm có layout/mô tả tĩnh nhưng có số lượng giỏ hàng động và gợi ý cá nhân hóa. PPR cho phép **cùng một trang** vừa là cả hai. ## Nó hoạt động như thế nào ```tsx import { Suspense } from "react"; export default function ProductPage() { return (

{/* STATIC — prerendered, served instantly from CDN */} {/* STATIC — same for everyone */} }> {/* DYNAMIC — streamed in per request */} }> {/* DYNAMIC — personalized, streamed */}

); } ``` Ý tưởng then chốt: mọi thứ **bên ngoài** một ranh giới `` được **prerender thành một khung tĩnh** lúc build. Bất cứ thứ gì **bên trong** Suspense (vốn đọc dữ liệu động — cookie, header, các fetch không cache) được xem như một "lỗ" động stream vào lúc request. ## Trình tự phân phối ```text 1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN 2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons ``` Người dùng nhận một first paint có ý nghĩa ngay lập tức (khung tĩnh từ CDN), rồi các phần cá nhân hóa lấp vào — tốt nhất của cả hai: tốc độ tĩnh *và* nội dung động, không cần quyết định routing hay chế độ rendering riêng. ## Trạng thái ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Tại sao điều này quan trọng PPR loại bỏ lựa chọn sai lầm giữa "nhanh nhưng tĩnh" và "động nhưng chậm". Bằng cách prerender khung và chỉ stream các lỗ động (được Suspense đánh dấu), một trang duy nhất phân phối first paint tức thì từ CDN cộng với nội dung cá nhân hóa — tự động, không cần tách trang hay tự chọn SSG so với SSR. Nó đại diện cho hướng đi của rendering Next.js: cấu thành tĩnh/động chi tiết theo từng component.