Nextjs Partial Prerendering Dynamicio Use Cache Streaming

Definisi

Partial Prerendering (PPR) menggabungkan static shell + dynamic content dalam satu response: shell di-prerender, bagian dinamis di-stream saat runtime. dynamicIO (eksperimental) membuat semua I/O default dinamis kecuali dibungkus cache()/use cache, membalik model default Next.js. use cache adalah direktif untuk men-cache hasil di server.

Kapan dipakai

• PPR: halaman dengan sebagian statis (layout, header) dan sebagian dinamis (user, harga) — ingin TTFB cepat tanpa menunggu data dinamis.
• dynamicIO + use cache: ingin eksplisit mana yang boleh di-cache, sisanya selalu fresh.
• Belum stabil untuk produksi besar; cocok eksperimen / rilis terkontrol.

Cara kerja

PPR (next.config)

js

// next.config.js
module.exports = {
  experimental: { ppr: true },
};

tsx

export const experimental_ppr = true;
 
export default function Page() {
  return (
    <>
      <header /> {/* static */}
      <Suspense fallback={<Skeleton />}>
        <UserPanel /> {/* dynamic, streamed */}
      </Suspense>
    </>
  );
}

use cache

tsx

import { cache } from 'react'; // atau experimental use cache
 
async function getPrice() {
  'use cache';
  const res = await fetch('https://api.harga');
  return res.json();
}

Struktur alur

Contoh kombinasi

tsx

async function getData() {
  'use cache';
  return db.query();
}
// dipanggil di server component, hasil di-cache antar request

Catatan implementasi

• PPR butuh Suspense boundary untuk menandai bagian dinamis; tanpa itu dianggap static.
• experimental_ppr = true per-file mengaktifkan PPR untuk route itu.
• dynamicIO membalik asumsi: fetch tanpa cache jadi dinamis, jadi pastikan yang boleh stale dibungkus cache().
• Butuh Next.js canary/terbaru; baca changelog sebelum produksi.

Kesalahan umum

• Tidak ada Suspense boundary: PPR tidak aktif, halaman jadi fully static/dynamic.
• Salah pasang experimental_ppr: route lain ikut berubah behavior.
• Cache data yang harus realtime: harga/stok jadi stale.
• Mix PPR + ISR bingung: tentukan satu strategi per route.

Referensi terkait

• Next.js Static Generation, SSR, ISR, Dynamic Rendering
• Next.js Streaming, Suspense, Parallel/Intercepting Routes
• Next.js cache() API dan Instrumentation