Hvad er Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** er en Next.js-gengivelsesmodel, der kombinerer **statisk og dynamisk indhold på en enkelt side** — den leverer en øjeblikkelig statisk skal, mens den streamer de dynamiske dele. Det usikrer den gamle alt-eller-intet-grænse mellem SSG og SSR. ## Det problem, den løser Traditionelt var en side *enten* fuldstændig statisk (hurtig, men kan ikke have brugerspecifikt indhold) *eller* fuldstændig dynamisk (kan personaliseres, men langsommere og ikke cachebar). Rigtige sider er blandede: en produktside har et statisk layout/beskrivelse, men en dynamisk kurvtæller og personaliserede anbefalinger. PPR lader **samme side** være begge dele. ## Sådan fungerer det ```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 **uden for** en ``-grænse **pregengives som en statisk skal** på byggetidspunktet. Alt **inden for** Suspense (som læser dynamiske data — cookies, headers, un-cachelagte hentninger) behandles som et dynamisk "hul", der streames på anfordringtidspunktet. ## 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 ``` Brugeren får en meningsfuld første maling øjeblikkeligt (statisk skal fra CDN), så fyldes de personaliserede stykker i — det bedste fra begge: statisk hastighed *og* dynamisk indhold, uden separat routing 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 betyder noget PPR fjerner det falske valg mellem "hurtig men statisk" og "dynamisk men langsom". Ved at pregengive skallen og kun streame de dynamiske huller (markeret af Suspense), leverer en enkelt side øjeblikkelig CDN-første maling plus personaliseret indhold — automatisk, uden at dele siden eller manuelt vælge SSG versus SSR. Det repræsenterer hvor Next.js-gengivelse er på vej hen: granulær, per-komponent statisk/dynamisk sammensætning.