« Tüm yayınlar

Next.js'te Kısmi Ön Render: Statik Kabuk, Dinamik Akış

Next.js'in deneysel PPR özelliği, statik HTML kabuğunu CDN'den anında sunarken dinamik Suspense bölümlerini origin'den aynı yanıtta akıtıyor. ISR ve dynamic rendering'e alternatif.

Next.js'teki Partial Prerendering (PPR) özelliği, bir sayfayı tek bir HTTP yanıtı içinde iki render aşamasına ayırıyor: build sırasında dinamik veri okumayan her şey statik HTML kabuğuna dönüştürülüp CDN edge'de saklanıyor; istek anında ise Suspense sınırları içindeki dinamik içerikler origin'den aynı yanıta akıtılıyor. Böylece kullanıcı navigasyon, başlık ve açıklama gibi statik öğeleri CDN hızında görürken, stok durumu veya kişiselleştirilmiş öneriler gibi dinamik parçalar kısa bir gecikmeyle akmaya devam ediyor.

Bu model, ISR'ın tüm sayfayı belirli bir süre bayat bırakma sorununu ve tam dinamik render'ın origin gecikmesi ile en yavaş sorguyu bekleme maliyetini ortadan kaldırıyor. Aktivasyon için mevcut Server Component veya Suspense kalıplarında değişiklik gerekmiyor; sadece next.config'de experimental.ppr: 'incremental' ayarı ve ilgili route'ta experimental_ppr = true export'u yeterli. Suspense dışındaki bileşenler cookies(), headers() veya searchParams gibi dinamik veri okuyamıyor; aksi halde build hata veriyor.

PPR, use cache mekanizmasıyla tamamlayıcı çalışıyor: PPR CDN sınırını yönetirken, use cache Suspense içindeki origin render'larını önbelleğe alıyor. Özellikle çoğunlukla statik olup izole dinamik bölümler içeren ürün sayfaları veya SaaS dashboard'ları için uygun bir strateji. Next.js 15 ve 16'da hâlâ deneysel durumda olsa da, Vercel'in production ortamında kullandığı belirtiliyor; ancak API stabil sürüme geçmeden önce değişebilir.