Partial Prerendering & Streaming — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

Sebelumnya satu halaman harus memilih: seluruhnya statis ATAU seluruhnya dinamis
PPR mengirim kerangka statis lebih dulu, lalu mengalirkan bagian dinamis
Suspense menentukan batas antara bagian statis dan dinamis
Fallback Suspense yang buruk menyebabkan pergeseran tata letak

📌 Masalah yang Diselesaikan

Halaman produk berisi:
  ├─ Header, navigasi, footer      → sama untuk semua orang (statis)
  ├─ Deskripsi & gambar produk     → jarang berubah (statis)
  ├─ Harga & stok terkini          → harus segar (dinamis)
  └─ "Direkomendasikan untuk Anda" → per pengguna (dinamis)

Model lama: satu bagian dinamis membuat SELURUH halaman
dirender ulang tiap permintaan. Header yang tidak pernah
berubah pun ikut menunggu kueri stok selesai.

Partial Prerendering memecah asumsi itu. Kerangka statis sudah jadi sejak waktu build dan dikirim seketika; lubang-lubang dinamisnya diisi menyusul lewat streaming dalam respons yang sama.

💻 Suspense sebagai Penanda Batas

app/produk/[id]/page.tsx

import { Suspense } from 'react'

export default async function HalamanProduk({ params }) {
  const { id } = await params      // params adalah Promise di Next 15+
  const produk = await ambilProduk(id)   // ber-'use cache' → statis

  return (
    <main>
      {/* Semua ini masuk kerangka statis */}
      <h1>{produk.nama}</h1>
      <GambarProduk src={produk.gambar} />
      <p>{produk.deskripsi}</p>

      {/* Lubang dinamis: dialirkan menyusul */}
      <Suspense fallback={<SkeletonHarga />}>
        <HargaDanStok id={id} />
      </Suspense>

      <Suspense fallback={<SkeletonRekomendasi />}>
        <Rekomendasi untukPengguna />
      </Suspense>
    </main>
  )
}

// Komponen ini membaca data segar tiap permintaan
async function HargaDanStok({ id }: { id: string }) {
  const { harga, stok } = await db.produk.harga(id)
  return <div>Rp{harga} · sisa {stok}</div>
}

💡 Aturannya sederhana

Apa pun yang berada di dalam <Suspense> dan menyentuh data dinamis — cookies(), headers(), searchParams, atau kueri tanpa cache — menjadi lubang dinamis. Sisanya masuk kerangka statis. Anda mengendalikan pembagiannya lewat penempatan batas Suspense.

🔑 API Dinamis Kini Asinkron

// Next 14 — sinkron
const cookieStore = cookies()
const token = cookieStore.get('token')

// Next 15+ — WAJIB di-await
const cookieStore = await cookies()
const token = cookieStore.get('token')

const headersList = await headers()
const { id } = await params
const { q } = await searchParams

⚠️ Ini perubahan yang merusak kode lama

cookies(), headers(), params, dan searchParams menjadi asinkron sejak Next 15. Perubahan ini yang memungkinkan Next menunda evaluasi bagian dinamis sampai kerangka statis terkirim. Kode dari tutorial Next 14 akan gagal atau memberi peringatan. Tersedia codemod untuk migrasi otomatis:

npx @next/codemod@latest next-async-request-api .

🎨 Fallback yang Baik Menentukan Kualitas

// ❌ Menyebabkan pergeseran tata letak — tinggi berubah saat data tiba
<Suspense fallback={<p>Memuat…</p>}>

// ✅ Skeleton berukuran sama dengan konten aslinya
<Suspense fallback={
  <div className="h-14 w-40 animate-pulse rounded bg-neutral-200" />
}>

🚫 Cumulative Layout Shift adalah biaya tersembunyi streaming

Streaming memperbaiki waktu tampil pertama, tetapi bila fallback berukuran berbeda dari konten aslinya, halaman akan "meloncat" saat data tiba. Pengguna yang sedang membaca atau hendak menekan tombol akan terganggu, dan skor Core Web Vitals Anda turun. Buat skeleton dengan dimensi yang sama persis dengan konten yang akan menggantikannya.

⚙️ Mengaktifkan & Memeriksa

// next.config.ts — nama flag berbeda antar versi,
// periksa dokumentasi untuk versi yang Anda pakai
export default {
  experimental: {
    ppr: 'incremental',   // aktifkan per-rute
  },
}

// lalu pada rute yang diinginkan:
export const experimental_ppr = true

# Melihat rute mana yang statis, dinamis, atau parsial
npm run build

# Keluarannya menandai tiap rute:
#   ○  Static     — dirender saat build
#   ●  SSG        — statis dengan generateStaticParams
#   ƒ  Dynamic    — dirender tiap permintaan
#   ◐  Partial    — kerangka statis + lubang dinamis

📌 Baca keluaran build setiap kali

Satu pemanggilan cookies() yang tidak sengaja berada di luar Suspense akan mengubah seluruh rute menjadi dinamis, dan Anda kehilangan manfaat prerendering tanpa peringatan apa pun. Tabel rute di akhir next build adalah cara tercepat menangkapnya — jadikan kebiasaan memeriksanya sebelum deploy.