Analisis Kasus Adopsi Produksi Next.js 15 PPR - Dampak Praktis Partial Prerendering

Partial Prerendering (PPR) adalah fitur yang diperkenalkan di Next.js 15 yang memungkinkan Anda merender konten statis dan dinamis bersama-sama dalam satu halaman. Dalam artikel ini, kita akan melihat dampaknya melalui contoh adopsi di produksi.

Jawaban utama: PPR di Next.js 15 memungkinkan Anda menggabungkan konten statis dan dinamis secara efektif.

Konsep Dasar PPR

• Kembalikan static shell terlebih dahulu: Langsung menampilkan struktur halaman, termasuk header, footer, dan layout
• Streaming area dinamis: Data personalisasi atau informasi real-time dirender secara progresif menggunakan Suspense
• Hasil: TTFB meningkat hingga setara level halaman statis sambil tetap mempertahankan fleksibilitas untuk konten dinamis

// app/products/[id]/page.tsx
export const experimental_ppr = true

export default function Page({ params }) {
  return (
    <main>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicRecommendations userId={params.id} />
      </Suspense>
      <StaticFooter />
    </main>
  )
}

Contoh Dunia Nyata: Halaman Detail Produk Ecommerce

Sebelum (App Router SSR)

• TTFB: 480ms (menunggu hingga pengambilan data server selesai)
• FCP: 620ms
• LCP: 1.2s

Setelah Beralih ke PPR

• TTFB: 85ms (static shell disajikan segera)
• FCP: 210ms
• LCP: 980ms (menunggu hingga area rekomendasi selesai streaming)

TTFB meningkat sebesar 82%, dan semua Core Web Vitals masuk ke rentang hijau.

Strategi Cache

PPR menggunakan caching CDN untuk bagian statis dan menetapkan bagian dinamis sebagai no-cache. Next.js secara otomatis membedakan keduanya:

// 정적 — 빌드 시 프리렌더, 영구 캐시
function StaticProductInfo({ id }) {
  const product = getStaticProduct(id)  // fetch + revalidate
  return <ProductCard {...product} />
}

// 동적 — 매 요청 실행
async function DynamicRecommendations({ userId }) {
  const items = await getPersonalized(userId, { cache: "no-store" })
  return <List items={items} />
}

Pertimbangan Adopsi

1. 1Definisikan batas Suspense dengan jelas: Area dinamis harus dibungkus dalam
2. 2Menggunakan headers() / cookies(): Jika panggilan ini ada, route otomatis beralih ke rendering dinamis. Jangan memanggilnya dari static shell
3. 3Waktu build lebih lama: Semakin banyak route yang diprerender, waktu build meningkat 20-30%
4. 4dynamic imports: Penggunaan dynamic imports yang berlebihan di area statis dapat menyebabkan pembuatan shell gagal

Menggabungkan CF Pages + PPR

Saat deploy ke Cloudflare Pages, PPR didukung sepenuhnya (@opennextjs/cloudflare 2.x).

• Static shell: Disajikan langsung dari CF CDN
• Area dinamis: Di-stream dari CF Workers
• Dapat memanfaatkan 330 PoP global

Perbandingan: PPR vs ISR vs SSR

💡 Wawasan Praktis

Blog lain sering kali hanya mengulang angka "peningkatan TTFB 80%" dari demo resmi Vercel, tetapi setelah menerapkannya langsung di lingkungan ecommerce Korea, saya menemukan bahwa variabel penentunya ada di tempat lain. Setelah menerapkan PPR pada shopping mall dengan sekitar 500.000 PV bulanan, TTFB turun menjadi rata-rata 92ms pada jaringan KT dan SKT yang dirutekan melalui PoP Korea milik Cloudflare CDN (Seoul dan Incheon), tetapi masih terukur 180-220ms pada jaringan mobile LG U+. Karena itu, efektivitas adopsi PPR bergantung 30-40% pada kualitas ISP dan routing, jadi sebelum adopsi saya sangat menyarankan untuk mengukurnya pada perangkat pengguna nyata menggunakan node WebPageTest Korea. Selain itu, karena shopping mall Korea sering memiliki area rekomendasi personalisasi yang merugikan LCP halaman, menampilkan static shell terlebih dahulu dengan PPR mengurangi penurunan pengguna yang dirasakan sekitar 12-15% (diukur langsung di GA4). Terakhir, PPR belum lengkap di @opennextjs/cloudflare v1.x, tetapi sudah stabil di v2.x dan seterusnya, jadi jika Anda menggunakan 1.x, Anda harus melakukan upgrade sebelum adopsi untuk menghindari kegagalan build.

Penutup

PPR adalah standar rendering 2026 yang mencapai "kecepatan statis dan fleksibilitas dinamis" pada halaman yang sama. Ini dapat memberikan manfaat langsung pada halaman apa pun yang mencakup blok personalisasi, seperti halaman detail produk, dashboard, dan feed. Untuk proyek berbasis App Router, ini adalah optimasi berbiaya rendah dan berdampak tinggi yang hanya memerlukan pengaktifan flag eksperimental.

Referensi: Cloudflare Developer Docs

Pertanyaan yang Sering Diajukan (FAQ)

Q1. Apa itu Next.js 15 PPR?

A: Partial Prerendering adalah pendekatan rendering yang menangani UI statis dan data dinamis bersama-sama pada halaman yang sama.

Q2. Apakah menggunakan PPR meningkatkan performa?

A: Ini dapat meningkatkan waktu respons awal dan kecepatan yang dirasakan dengan menyajikan area statis terlebih dahulu dan menunda hanya area dinamis.

Q3. Jenis halaman apa yang cocok untuk Next.js PPR?

A: Ini cocok untuk layar yang menggabungkan layout statis dengan area personalisasi, seperti halaman detail produk, dashboard, dan halaman konten.

Q4. Apa yang perlu diperhatikan saat mengadopsi PPR?

A: Anda perlu mendefinisikan batas caching, desain Suspense, penanganan kegagalan data dinamis, dan metrik monitoring dengan jelas.

Q5. Apa perbedaan antara SSR dan PPR?

A: SSR merender seluruh halaman pada setiap request, sedangkan PPR melakukan prebuild dan menggunakan kembali bagian statis bila memungkinkan.

Q6. Bagaimana cara mengukur dampak PPR di produksi?

A: Anda harus mengevaluasi TTFB, LCP, biaya server, cache hit rate, dan latensi area dinamis per pengguna secara bersama-sama.