Partial Prerendering (PPR) ni nini?

Question

Accepted Answer

**Partial Prerendering (PPR)** ni mfumo wa rendering wa Next.js unaochanganya **maudhui ya static na dynamic katika ukurasa mmoja** — ukihudumia shell ya static papo hapo huku ukifanya streaming ya sehemu za dynamic. Inafuta mstari wa zamani wa yote-au-hakuna kati ya SSG na SSR. ## Tatizo linaloutatua Kwa kawaida ukurasa ulikuwa *aidha* static kabisa (haraka, lakini hauwezi kuwa na maudhui ya kila mtumiaji) *au* dynamic kabisa (unaweza kuwa wa kibinafsi, lakini polepole na haupatikani kwa cache). Kurasa halisi zimechanganywa: ukurasa wa bidhaa una layout/maelezo ya static lakini idadi ya cart ya dynamic na mapendekezo ya kibinafsi. PPR huruhusu **ukurasa huo huo** kuwa vyote viwili. ## Jinsi inavyofanya kazi ```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 */}

); } ``` Wazo kuu: kila kitu kilicho **nje** ya mpaka wa `` huwa **prerendered kama static shell** wakati wa build. Chochote kilicho **ndani** ya Suspense (kinachosoma data ya dynamic — cookies, headers, fetches zisizo na cache) hutendewa kama "shimo" la dynamic linalofanya streaming wakati wa request. ## Mfuatano wa uwasilishaji ```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 ``` Mtumiaji hupata first paint yenye maana papo hapo (static shell kutoka CDN), kisha vipande vya kibinafsi hujaza — bora-zaidi-ya-vyote: kasi ya static *na* maudhui ya dynamic, bila uamuzi tofauti wa routing au rendering-mode. ## Hali ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Kwa nini ni muhimu PPR huondoa chaguo la uongo kati ya "haraka lakini static" na "dynamic lakini polepole." Kwa kufanya prerendering ya shell na streaming ya mashimo ya dynamic pekee (yaliyowekwa alama na Suspense), ukurasa mmoja huwasilisha first paint ya kasi-ya-CDN pamoja na maudhui ya kibinafsi — kiotomatiki, bila kugawanya ukurasa au kuchagua kwa mkono SSG dhidi ya SSR. Inawakilisha mahali ambapo rendering ya Next.js inaelekea: utungaji wa static/dynamic kwa undani, kwa kila component.