Partial Prerendering (PPR) म्हणजे काय?

Question

Accepted Answer

**Partial Prerendering (PPR)** हे Next.js rendering मॉडेल आहे जे **static आणि dynamic content एकाच page मध्ये एकत्रित करते** — तात्काळ static shell सेवा देते तर dynamic parts streaming करते. हे SSG आणि SSR यामधील जुन्या all-or-nothing रेषा धुसर करते. ## समस्या जी ते सोडवते पारंपारिकरित्या page *एकतर* पूर्णपणे static होता (वेगवान, पण per-user content असू शकत नाही) *किंवा* पूर्णपणे dynamic होता (व्यक्तिगत केले जाऊ शकते, पण हळू आणि uncacheable). वास्तविक pages मिश्र आहेत: product page मध्ये static layout/description आहे पण dynamic cart count आणि personalized recommendations आहेत. PPR **समान page** दोन्ही असू देते. ## हे कसे काम करते ```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 */}

); } ``` मुख्य कल्पना: `` boundary **बाहेरची** प्रत्येक गोष्ट build time वर **static shell म्हणून prerender केली जाते**. कोणतीही गोष्ट **आंदरून** Suspense (जी dynamic data वाचते — cookies, headers, uncached fetches) हे dynamic "hole" म्हणून request time वर streaming मध्ये येते. ## डिलिव्हरी क्रम ```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 तात्काळ मिळते (CDN वरून static shell), नंतर व्यक्तिगत तुकडे भरले जातात — दोन्हीचे सर्वोत्तम: static speed *आणि* dynamic content, कोणतीही वेगळी routing किंवा 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 "वेगवान पण static" आणि "dynamic पण हळू" यामधील खोट्या निवडीला दूर करते. Shell prerender करून आणि फक्त dynamic holes (Suspense द्वारे चिन्हांकित) streaming करून, एकाच page CDN-तात्काळ first paint अधिक व्यक्तिगत content डिलिव्हर करते — स्वयंचलितपणे, page विभाजित न करता किंवा SSG विरुद्ध SSR हाताने निवडल्या विना. हे Next.js rendering कुठे जात आहे हे प्रतिनिधित्व करते: granular, per-component static/dynamic composition.