Mikä on Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** on Next.js-renderointimalli, joka yhdistää **staattiset ja dynaamiset sisällöt yhdellä sivulla** — se toimittaa hetkellisen staattisen kuoren samalla kun se lähettää dynaamiset osat. Se hämärtää vanhan kaikkea-tai-ei-mitään-rajaa SSG:n ja SSR:n välillä. ## Ongelma, jonka se ratkaisee Perinteisesti sivu oli *joko* täysin staattinen (nopea, mutta ei voi sisältää käyttäjäkohtaista sisältöä) *tai* täysin dynaaminen (voidaan personoida, mutta hitaampi ja välimuistittavissa). Todelliset sivut ovat sekoitettuja: tuotesivulla on staattinen asettelu/kuvaus, mutta dynaaminen ostoskorin laskuri ja personoidut suositukset. PPR antaa **saman sivun** olla molempia. ## Kuinka se toimii ```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 */}

); } ``` Perusajatus: kaikki **ulkopuolella** ``-rajaa on **esi-renderöity staattisena kuorena** rakennusajalla. Kaikki **sisällä** Suspense (joka lukee dynaamista dataa — evästeet, otsikot, välimuistittamattomat haut) käsitellään dynaamisena "reikänä", joka lähetetään pyyntöajalla. ## Toimitusjärjestys ```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 ``` Käyttäjä saa mielekkään ensimmäisen piirustuksen hetkessä (staattinen kuori CDN:stä), sitten henkilökohtaistetut osat täyttyvät — molempien paras: staattinen nopeus *ja* dynaaminen sisältö, ilman erillistä reititystä tai renderointitilaa koskevaa päätöstä. ## Status ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Miksi se on tärkeää PPR poistaa väärän valinnan "nopea mutta staattinen" ja "dynaaminen mutta hidas" välillä. Kuoren esi-renderöinnillä ja vain dynaamisten reikien (Suspense:n merkitsemien) lähettämisellä yksi sivu toimittaa CDN-hetkellisen ensimmäisen piirustuksen sekä henkilökohtaistetun sisällön — automaattisesti, ilman sivun jakamista tai SSG vs SSR:n manuaalista valintaa. Se edustaa suuntaa, johon Next.js-renderöinti on menossa: rakeista, komponenttikohtaista staattista/dynaamista koostumusta.