Partial Prerendering (PPR) ਕੀ ਹੈ?

Question

Accepted Answer

**Partial Prerendering (PPR)** ایک Next.js رینڈرنگ ماڈل ہے جو **ایک صفحے پر سٹیٹک اور متحرک مواد کو یکجا کرتا ہے** — فوری طور پر سٹیٹک شیل فراہم کرتے ہوئے متحرک حصوں کو سٹریم کرتا ہے۔ یہ SSG اور SSR کے درمیان پرانی تمام یا کچھ نہیں سطح کو دھندلا کرتا ہے۔ ## یہ جو مسئلہ حل کرتا ہے روایتی طور پر ایک صفحہ *یا تو* مکمل طور پر سٹیٹک (تیز، لیکن فی صارف مواد نہیں ہو سکتا) *یا* مکمل طور پر متحرک (ذاتی نوعیت کا ہو سکتا ہے، لیکن سست اور غیر قابل کیش ہے) تھا۔ اصل صفحات مخلوط ہیں: ایک مصنوع کا صفحہ ایک سٹیٹک لے آؤٹ/تفصیل ہے لیکن متحرک کارٹ شمار اور ذاتی نوعیت کی سفارشات ہیں۔ 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 */}

); } ``` اہم خیال: سب کچھ **باہر** `` کی حد **بند کے وقت سٹیٹک شیل کے طور پر پہلے سے رندر شدہ** ہے۔ کوئی بھی چیز **اندر** Suspense (جو متحرک ڈیٹا پڑھتا ہے — cookies، headers، بغیر کیش شدہ فیچ) کو ایک متحرک "سوراخ" کے طور پر سلوک کیا جاتا ہے جو درخواست کے وقت سٹریم ہوتا ہے۔ ## ڈیلیوری کی ترتیب ```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 سے سٹیٹک شیل)، پھر ذاتی نوعیت کے ٹکڑے بھرے جاتے ہیں — دونوں کا سب سے بہترین: سٹیٹک رفتار *اور* متحرک مواد، کوئی الگ رینڈرنگ یا رینڈرنگ موڈ فیصلہ کے بغیر۔ ## حالت ```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 "تیز لیکن سٹیٹک" اور "متحرک لیکن سست" کے درمیان غلط انتخاب کو ہٹاتا ہے۔ شیل کو پہلے سے رندر کر کے اور صرف متحرک سوراخوں کو (Suspense کی طرف سے نشان زد) سٹریم کرتے ہوئے، ایک صفحہ CDN-فوری پہلی پیڈ اور ذاتی نوعیت کا مواد فراہم کرتا ہے — خود بخود، صفحہ کو تقسیم کیے بغیر یا SSG بمقابلہ SSR کو دستی طور پر منتخب کیے بغیر۔ یہ نمائندگی کرتا ہے کہ Next.js رینڈرنگ کہاں جا رہی ہے: دانے دار، فی جزو سٹیٹک/متحرک ترکیب۔