Partial Prerendering (PPR) nedir?

Question

Accepted Answer

**Partial Prerendering (PPR)**, **statik ve dinamik içeriği tek bir sayfada** birleştiren ve anlık bir statik shell sunup dinamik kısımları akışla ileten bir Next.js render modelidir. SSG ve SSR arasındaki eski "hepsi ya da hiçbiri" sınırını bulanıklaştırır. ## Çözdüğü sorun Geleneksel olarak bir sayfa *ya tamamen* statik (hızlı, ancak kullanıcıya özel içerik olamaz) *ya da* tamamen dinamik (kişiselleştirilebilir, ancak yavaş ve önbelleklenemez). Gerçek sayfalar karışıktır: bir ürün sayfasında statik bir layout/açıklama vardır ancak dinamik bir sepet sayısı ve kişiselleştirilmiş öneriler bulunur. PPR, **aynı sayfanın** her ikisi de olmasını sağlar. ## Nasıl çalışır ```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 */}

); } ``` Temel fikir: bir `` sınırı **dışındaki** her şey derleme zamanında **statik shell olarak önceden render edilir**. Suspense **içindeki** her şey (dinamik veri okuyan — çerezler, başlıklar, önbelleklenmeyen getirişler) istek zamanında akan dinamik bir "delik" olarak işlenir. ## Teslim sırası ```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 ``` Kullanıcı hemen anlamlı bir ilk resim alır (CDN'den statik shell), ardından kişiselleştirilmiş parçalar doldurulur — her ikisinin avantajı: statik hız *ve* dinamik içerik, ayrı yönlendirme veya render modu kararı olmaksızın. ## Durum ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Neden önemli PPR, "hızlı ama statik" ile "dinamik ama yavaş" arasındaki yanlış seçimi ortadan kaldırır. Shell'i önceden render ederek ve yalnızca dinamik delikleri (Suspense tarafından işaretlenen) akışla aktararak, tek bir sayfa CDN-anında ilk resim artı kişiselleştirilmiş içerik sağlar — otomatik olarak, sayfayı bölmeden veya SSG ve SSR arasında manuel seçim yapılmaksızın. Bu, Next.js renderlamanın nereye gittiğini temsil eder: tanecikli, bileşen başına statik/dinamik kompozisyon.