Partial Prerendering (PPR) అంటే ఏమిటి?

Question

Accepted Answer

**Partial Prerendering (PPR)** అనేది Next.js రెండరింగ్ మోడల్, ఇది **స్టాటిక్ మరియు డైనమిక్ కంటెంట్‌ను ఒకే పేజీలో కలుపుతుంది** — తక్షణ స్టాటిక్ షెల్ను సేవ చేస్తూ డైనమిక్ భాగాలను స్ట్రీమింగ్ చేస్తుంది. ఇది SSG మరియు SSR మధ్య పాత all-or-nothing లైన్‌ను అస్పష్టం చేస్తుంది. ## సమస్య ఏది పారంపరికంగా పేజీ *కేవలం* పూర్తిగా స్టాటిక్ (వేగవంతమైనది, కానీ per-user కంటెంట్ ఉండకూడదు) *లేదా* పూర్తిగా డైనమిక్ (వ్యక్తిగతమైనది కాగలది, కానీ నెమ్మదిగా మరియు కాష్ చేయ కుండా) ఉండేది. నిజమైన పేజీలు మిశ్రమాలు: ఒక ఉత్పత్తి పేజీకి స్టాటిక్ లేఅవుట్/వర్ణన ఉంది కానీ డైనమిక్ కార్ట్ గణన మరియు వ్యక్తిగత సిఫారిషులు ఉంటాయి. 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 */}

); } ``` ముఖ్య ఆలోచన: `` సరిహద్దు **బయట** ఉన్న అన్నీ **బిల్డ్ సమయానికి స్టాటిక్ షెల్‌గా prerendered** చేయబడతాయి. Suspense **లోపల** ఉన్న ఏదైనా (ఇది డైనమిక్ డేటా చదువుతుంది — cookies, headers, uncached fetches) డైనమిక్ "hole" గా పరిగణించబడుతుంది, ఇది request సమయానికి స్ట్రీమింగ్ చేయబడుతుంది. ## డెలివరీ క్రమం ```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 ``` ユーザーは意味のある最初のペイント（CDNからの静的シェル）をすぐに取得し、その後パーソナライズされたピースが埋められます — 最高の両方：static speed *და* dynamic content, ఎటువంటి ప్రత్యేక రూటింగ్ లేదా rendering-mode నిర్ణయం లేకుండా. ## స్థితి ```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 "వేగవంతమైనది కానీ స్టాటిక్" మరియు "డైనమిక్ కానీ నెమ్మదిగా" మధ్య తప్పుడు ఎంపికను తీసివేస్తుంది. షెల్‌ను prerender చేయడం మరియు కేవలం డైనమిక్ holes (Suspense చేత గుర్తించబడిన) స్ట్రీమింగ్ చేయడం ద్వారా, ఒకే పేజీ CDN-తక్షణ first paint ప్లస్ వ్యక్తిగత కంటెంట్‌ను డెలివర్ చేస్తుంది — స్వయంచాలకంగా, పేజీని విభజించకుండా లేదా manually SSG vs SSR ఎంచుకోవడం లేకుండా. ఇది Next.js rendering ఎక్కడికి వెళ్లబోతున్నది అనే ప్రాతినిధ్యం: granular, per-component static/dynamic composition.