Hva er Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** er en Next.js-renderingsmodell som kombinerer **statisk og dynamisk innhold på en enkelt side** — ved å servere et øyeblikkelig statisk skall mens dynamiske deler streames. Det gjør den gamle alt-eller-ingenting-grensen mellom SSG og SSR uklar. ## Problemet det løser Tradisjonselt var en side *enten* helt statisk (raskt, men kan ikke ha per-bruker innhold) *eller* helt dynamisk (kan være personalisert, men er tregere og ikke cachebart). Reelle sider er blandede: en produktside har et statisk oppsett/beskrivelse, men en dynamisk handlekurvteller og personaliserte anbefalinger. PPR lar **samme side** være begge deler. ## Hvordan det fungerer ```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 */}

); } ``` Hovedideen: alt **utenfor** en ``-grense er **forrendert som et statisk skall** ved byggetid. Alt **innenfor** Suspense (som leser dynamiske data — cookies, headers, ikkje-bufrede hentinger) blir behandlet som et dynamisk "hull" som streames ved forespørselstid. ## Leveringssekvensen ```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 ``` Brukeren får et meningsfullt første bilde umiddelbart (statisk skall fra CDN), deretter fylles de personaliserte bitene inn — det beste av begge: statisk hastighet *og* dynamisk innhold, uten separat ruting eller rendering-mode-beslutning. ## 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. ``` ## Hvorfor det betyr noe PPR fjerner det falske valget mellom "raskt men statisk" og "dynamisk men tregere." Ved å forrender skallet og streame bare de dynamiske hullene (merket av Suspense), leverer en enkelt side CDN-øyeblikkelig første bilde pluss personalisert innhold — automatisk, uten å dele siden eller manuelt velge SSG versus SSR. Det representerer hvor Next.js-rendering går: granulær, per-komponent statisk/dynamisk komposisjon.