Partial Prerendering (PPR) என்றால் என்ன?

Question

Accepted Answer

**Partial Prerendering (PPR)** என்பது ஒரு Next.js rendering model ஆகும், இது **ஒரே பக்கத்தில் static மற்றும் dynamic உள்ளடக்கத்தை** இணைக்கிறது — உடனடி static shell-ஐ வழங்கி, dynamic பகுதிகளை stream செய்கிறது. இது SSG-க்கும் SSR-க்கும் இடையே இருந்த பழைய அனைத்தும்-அல்லது-ஒன்றுமில்லை எல்லையை மங்கச் செய்கிறது. ## இது தீர்க்கும் சிக்கல் பாரம்பரியமாக ஒரு பக்கம் *ஒன்று* முழுமையாக static (வேகமானது, ஆனால் ஒவ்வொரு பயனருக்கான உள்ளடக்கம் இருக்க முடியாது) *அல்லது* முழுமையாக dynamic (தனிப்பயனாக்கப்படலாம், ஆனால் மெதுவானது மற்றும் cache செய்ய முடியாதது) ஆக இருந்தது. உண்மையான பக்கங்கள் கலந்தவை: ஒரு product page-க்கு static layout/விளக்கம் இருக்கும், ஆனால் dynamic cart count மற்றும் தனிப்பயனாக்கப்பட்ட பரிந்துரைகள் இருக்கும். 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-க்கு **வெளியே** உள்ள அனைத்தும் build time-இல் **static shell ஆக prerender** செய்யப்படுகிறது. Suspense-க்கு **உள்ளே** உள்ள எதுவும் (dynamic data-வை — cookies, headers, cache செய்யப்படாத fetches — படிக்கிறது) request time-இல் stream செய்யப்படும் dynamic "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 ``` பயனர் உடனடியாக அர்த்தமுள்ள முதல் paint-ஐப் (CDN-இலிருந்து static shell) பெறுகிறார், பின்னர் தனிப்பயனாக்கப்பட்ட பகுதிகள் நிரப்பப்படுகின்றன — இரண்டிலும் சிறந்தது: static வேகம் *மற்றும்* dynamic உள்ளடக்கம், தனி 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-ஆல் குறிக்கப்பட்டது) stream செய்வதன் மூலம், ஒரே பக்கம் CDN-உடனடி முதல் paint-ஐயும் தனிப்பயனாக்கப்பட்ட உள்ளடக்கத்தையும் வழங்குகிறது — தானாகவே, பக்கத்தைப் பிரிக்காமல் அல்லது SSG vs SSR-ஐ கைமுறையாகத் தேர்ந்தெடுக்காமல். Next.js rendering எங்கு செல்கிறது என்பதை இது குறிக்கிறது: நுணுக்கமான, ஒவ்வொரு component-க்கான static/dynamic கலவை.