Partial Prerendering (PPR) คืออะไร?

Question

Accepted Answer

**Partial Prerendering (PPR)** คือโมเดลการเรนเดอร์ของ Next.js ที่รวม **เนื้อหาแบบ static และ dynamic ไว้ในหน้าเดียวกัน** โดยให้บริการ static shell ทันทีพร้อมกับ stream ส่วนที่เป็น dynamic เข้ามา มันทำให้เส้นแบ่งแบบเดิมที่เคยเป็นแบบ all-or-nothing ระหว่าง SSG กับ SSR เลือนหายไป ## ปัญหาที่มันแก้ ในอดีตหน้าเว็บหนึ่งหน้าจะเป็น *อย่างใดอย่างหนึ่ง* คือ static ทั้งหมด (เร็ว แต่ไม่สามารถมีเนื้อหาเฉพาะผู้ใช้แต่ละคนได้) *หรือ* dynamic ทั้งหมด (ปรับแต่งเฉพาะบุคคลได้ แต่ช้ากว่าและ cache ไม่ได้) แต่หน้าเว็บจริง ๆ นั้นผสมกัน เช่น หน้าสินค้ามี layout/คำอธิบายแบบ static แต่มีจำนวนสินค้าในตะกร้าและรายการแนะนำเฉพาะบุคคลแบบ dynamic PPR ทำให้ **หน้าเดียวกัน** เป็นได้ทั้งสองอย่าง ## มันทำงานอย่างไร ```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 */}

); } ``` แนวคิดหลักคือ ทุกอย่างที่อยู่ **นอก** ขอบเขตของ `` จะถูก **prerender เป็น static shell** ตอน build time ส่วนอะไรก็ตามที่อยู่ **ใน** Suspense (ซึ่งอ่านข้อมูลแบบ dynamic เช่น cookies, headers, หรือ fetch ที่ไม่ได้ cache) จะถูกมองว่าเป็น "ช่องว่าง" แบบ dynamic ที่ stream เข้ามาในตอน request time ## ลำดับการส่งมอบ ```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 ``` ผู้ใช้ได้ first paint ที่มีความหมายในทันที (static shell จาก CDN) จากนั้นส่วนที่เป็นเนื้อหาเฉพาะบุคคลจึงค่อย ๆ เติมเข้ามา ได้สิ่งที่ดีที่สุดของทั้งสองด้าน คือความเร็วแบบ static *และ* เนื้อหาแบบ dynamic โดยไม่ต้องตัดสินใจแยก routing หรือเลือกโหมดการเรนเดอร์ ## สถานะ ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## ทำไมจึงสำคัญ PPR กำจัดทางเลือกลวง ๆ ระหว่าง "เร็วแต่ static" กับ "dynamic แต่ช้า" ออกไป ด้วยการ prerender ส่วน shell และ stream เฉพาะช่องว่างที่เป็น dynamic (ทำเครื่องหมายด้วย Suspense) หน้าเดียวสามารถส่งมอบ first paint ที่เร็วทันใจระดับ CDN พร้อมกับเนื้อหาเฉพาะบุคคล โดยอัตโนมัติ ไม่ต้องแยกหน้าหรือเลือก SSG กับ SSR เองด้วยมือ มันสะท้อนทิศทางที่การเรนเดอร์ของ Next.js กำลังมุ่งไป นั่นคือการประกอบ static/dynamic แบบละเอียดในระดับคอมโพเนนต์