આંશિક પૂર્વ રેન્ડરિંગ (PPR) શું છે?

Question

Accepted Answer

**આંશિક પૂર્વ રેન્ડરિંગ (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 (જે ગતિશીલ ડેટા વાંચે છે — કૂકીઝ, હેડર, અનકેશીક્ષ ફેચ) એક ગતિશીલ "છિદ્ર" તરીકે ગણવામાં આવે છે જે વિનંતી સમયે સ્ટ્રીમ કરે છે. ## ડિલિવરી ક્રમ ```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 રેન્ડરિંગ ક્યાંથી જઈ રહ્યું છે: દાણાદાર, પ્રતિ-ઘટક સ્થિર/ગતિશીલ રચના.