Partial Prerendering (PPR) भनेको के हो?

Question

Accepted Answer

**Partial Prerendering (PPR)** एक Next.js rendering मडेल हो जसले **स्थिर र गतिशील सामग्री एकै पृष्ठमा जोडिएको** हुन्छ — तात्कालिक स्थिर shell सेवा गर्दै गतिशील भागहरू स्ट्रिमिङ गरे। यो SSG र SSR को बीचको पुरानो all-or-nothing लाइनलाई धमिलो पारेको छ। ## यसले समाधान गर्ने समस्या पारम्परिक रूपमा एक पृष्ठ *या तो* पूर्ण स्थिर (छिटो, तर प्रति-प्रयोगकर्ता सामग्री हुन सक्दैन) *वा* पूर्ण गतिशील (व्यक्तिगत हुन सक्छ, तर ढिलो र अक्षय हुन सक्दैन) थियो। वास्तविक पृष्ठहरू मिश्रित हुन्छन्: एक उत्पाद पृष्ठमा स्थिर लेआउट/विवरण हुन्छ तर गतिशील कार्ट गणना र व्यक्तिगतकृत सिफारिशहरू हुन्छन्। 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 */}

); } ``` मुख्य विचार: सबै कुरा **बाहिर** एक `` सीमा **बिल्ड समयमा स्थिर shell को रूपमा prerendered** हुन्छ। कुनै पनि कुरा **भित्र** Suspense (जो गतिशील डेटा पढ्छ — cookies, headers, uncached fetches) गतिशील "hole" को रूपमा व्यवहार गरिन्छ जो अनुरोध समयमा स्ट्रिमिङ हुन्छ। ## डिलिभरी अनुक्रम ```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 बाट स्थिर shell), त्यसपछी व्यक्तिगतकृत टुकराहरू भरिन्छन् — दुवै को सर्वोत्तम: स्थिर गति *र* गतिशील सामग्री, कुनै अलग रुटिङ वा 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 "छिटो तर स्थिर" र "गतिशील तर ढिलो" को बीच गलत छनोट हटाएको छ। shell prerender गरेर र केवल गतिशील holes (Suspense द्वारा चिह्नित) स्ट्रिमिङ गरेर, एकै पृष्ठ CDN-तात्कालिक पहिलो पेन्ट प्लस व्यक्तिगतकृत सामग्री वितरण गर्छ — स्वचालित रूपमा, पृष्ठ विभाजन वा SSG बनाम SSR को मैनुअल रूपमा छनोट बिना। यो Next.js rendering कहाँ जाइरहेको छ भनेर प्रतिनिधित्व गर्छ: granular, प्रति-component स्थिर/गतिशील संरचना।