Vad är Partial Prerendering (PPR)?

Question

Accepted Answer

**Partial Prerendering (PPR)** är en Next.js-renderingsmodell som kombinerar **statiskt och dynamiskt innehål på en enda sida** — levererar ett omedelbar statiskt skal medan de dynamiska delarna strömmas. Den suddas ut den gamla allt-eller-intet-gränsen mellan SSG och SSR. ## Problemet den löser Tradditionellt var en sida *antingen* helt statisk (snabb, men kan inte ha användarspecifikt innehål) *eller* helt dynamisk (kan personaliseras, men långsammare och inte cachebar). Verkliga sidor är blandade: en produktsida har en statisk layout/beskrivning men en dynamisk varukorgsräknare och personaliserade rekommendationer. PPR låter **samma sida** vara båda. ## Hur det fungerar ```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 */}

); } ``` Huvudidén: allt **utanför** en ``-gräns är **förrenderad som ett statiskt skal** vid byggning. Allt **inuti** Suspense (som läser dynamisk data — cookies, headers, okachade hämtningar) behandlas som ett dynamiskt "hål" som strömmas in vid request-tid. ## Leveranssekvensen ```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 ``` Användaren får en meningsfull första renderingen omedelbar (statiskt skal från CDN), sedan fylls de personaliserade bitarna i — det bästa av båda: statisk hastighet *och* dynamiskt innehål, utan separat routing eller rendering-lägesbeslut. ## 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. ``` ## Varför det är viktigt PPR tar bort det falska valet mellan "snabb men statisk" och "dynamisk men långsam." Genom att förrendera skalet och strömma endast de dynamiska hålen (markerade med Suspense) levererar en enda sida CDN-omedelbar första renderering plus personaliserat innehål — automatiskt, utan att dela upp sidan eller manuellt välja SSG kontra SSR. Det representerar vart Next.js-rendering är på väg: granulär, per-komponent statisk/dynamisk sammansättning.