Cos'è il Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** è un modello di rendering di Next.js che combina **contenuto statico e dinamico in una singola pagina** — fornendo una shell statica istantanea mentre effettua lo streaming delle parti dinamiche. Sfuma il vecchio concetto binario tra SSG e SSR. ## Perché è importante Tradizionalmente una pagina era *o* completamente statica (veloce, ma non può avere contenuto personalizzato) *o* completamente dinamica (può essere personalizzata, ma più lenta e non cacheable). Le pagine reali sono miste: una pagina di prodotto ha un layout/descrizione statica ma un conteggio del carrello dinamico e consigli personalizzati. PPR consente alla **stessa pagina** di essere entrambe. ## Come funziona ```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 */}

); } ``` L'idea chiave: tutto **all'esterno** di un confine `` è **prereso come shell statica** al momento della build. Qualsiasi cosa **all'interno** di Suspense (che legge dati dinamici — cookie, header, fetch non cachati) è trattata come un "buco" dinamico che effettua lo streaming al momento della richiesta. ## La sequenza di consegna ```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 ``` L'utente ottiene un primo paint significativo immediatamente (shell statica da CDN), quindi i pezzi personalizzati si compilano — il meglio di entrambi: velocità statica *e* contenuto dinamico, senza routing separato o decisione sulla modalità di rendering. ## Stato ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Perché è importante PPR rimuove la scelta falsa tra "veloce ma statico" e "dinamico ma lento". Prerendendo la shell e effettuando lo streaming solo dei buchi dinamici (contrassegnati da Suspense), una singola pagina fornisce il primo paint istantaneo da CDN più contenuto personalizzato — automaticamente, senza dividere la pagina o scegliere manualmente tra SSG e SSR. Rappresenta il percorso verso cui sta andando il rendering di Next.js: composizione granulare e per-componente di statico/dinamico.