Partial Prerendering (PPR) کیا ہے؟

Question

Accepted Answer

**Partial Prerendering (PPR)** ایک Next.js rendering model ہے جو **static اور dynamic content کو ایک صفحہ میں جوڑتا ہے** — ایک فوری static shell کے ساتھ dynamic حصوں کو stream کرتے ہوئے۔ یہ SSG اور SSR کے درمیان پرانی سب-یا-کچھ بھی نہیں لائن کو مبہم کرتا ہے۔ ## مسئلہ جو یہ حل کرتا ہے روایتی طور پر ایک صفحہ *یا تو* مکمل طور پر static تھا (تیز، لیکن per-user content نہیں ہو سکتا) *یا* مکمل طور پر dynamic تھا (ذاتی نوعیت کا ہو سکتا ہے، لیکن سست اور uncacheable)۔ حقیقی صفحے mixed ہیں: ایک product صفحہ میں static layout/description ہے لیکن dynamic cart count اور personalized recommendations ہیں۔ 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 */}

); } ``` اہم نکتہ: سب کچھ **بیرونی** ایک `` boundary کے **static shell کے طور پر prerendered ہے** build time پر۔ کوئی بھی چیز **اندر** Suspense (جو dynamic data پڑھتی ہے — cookies، headers، uncached fetches) ایک dynamic "hole" کے طور پر علاج کیا جاتا ہے جو request time پر stream کرتا ہے۔ ## ڈیلیوری کی ترتیب ```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 ``` صارف کو فوری معنی خیز پہلی painting ملتی ہے (CDN سے static shell)، پھر personalized pieces بھر جاتے ہیں — بہترین: static رفتار *اور* 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 کو stream کر کے (Suspense سے نشان زد)، ایک صفحہ CDN-فوری پہلی painting کے ساتھ personalized content فراہم کرتا ہے — خودکار طور پر، صفحہ کو تقسیم کیے بغیر یا SSG بمقابلہ SSR کو دستی طور پر منتخب کیے بغیر۔ یہ نمائندگی کرتا ہے جہاں Next.js rendering جا رہی ہے: granular، per-component static/dynamic composition۔