Τι είναι το Partial Prerendering (PPR);

Question

Accepted Answer

**Partial Prerendering (PPR)** είναι ένα μοντέλο απόδοσης Next.js που συνδυάζει **στατικό και δυναμικό περιεχόμενο σε μία μόνο σελίδα** — παρέχει ένα στιγμιαίο στατικό κέλυφος ενώ κάνει streaming τα δυναμικά μέρη. Θολώνει τη παλιά γραμμή όλα-ή-τίποτα μεταξύ SSG και SSR. ## Το πρόβλημα που λύνει Παραδοσιακά μια σελίδα ήταν *είτε* πλήρως στατική (γρήγορη, αλλά δεν μπορούσε να έχει περιεχόμενο ανά χρήστη) *είτε* πλήρως δυναμική (μπορούσε να προσωποποιηθεί, αλλά πιο αργή και μη cacheable). Οι πραγματικές σελίδες είναι μικτές: μια σελίδα προϊόντος έχει στατική διάταξη/περιγραφή αλλά δυναμικό πλήθος καλαθιού και προσωποποιημένες συστάσεις. Το 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, non-cached fetches) θεωρείται μια δυναμική "οπή" που γίνεται streaming κατά το χρόνο του αιτήματος. ## Η ακολουθία παράδοσης ```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 αφαιρεί την ψευδή επιλογή μεταξύ "γρήγορο αλλά στατικό" και "δυναμικό αλλά αργό". Με την προαπόδοση του κελύφους και το streaming μόνο των δυναμικών οπών (σημειωμένα από Suspense), μια μόνη σελίδα παρέχει CDN-στιγμιαίο πρώτο χρώμα συν προσωποποιημένο περιεχόμενο — αυτόματα, χωρίς διαίρεση της σελίδας ή χειροκίνητη επιλογή SSG έναντι SSR. Αντιπροσωπεύει το μέρος προς το οποίο κατευθύνεται η απόδοση του Next.js: λεπτομερής, ανά-στοιχείο στατική/δυναμική σύνθεση.