Partial Prerendering (PPR) Next.js 16

Partial Prerendering (PPR) adalah teknik rendering Next.js 16 yang menggabungkan static shell hasil prerender saat build dengan konten dinamis yang di-stream belakangan, dalam satu route yang sama. Shell statis dikirim instan ke browser, lalu bagian dinamis menyusul lewat batas Suspense, sehingga halaman terasa cepat tanpa kehilangan data real-time.

Apa Itu Partial Prerendering di Next.js 16?#

Sebelum PPR, sebuah route pada dasarnya harus memilih salah satu: statis penuh (cepat tapi datanya bisa basi) atau dinamis penuh (data selalu segar tapi setiap request menunggu server). PPR menghapus pilihan itu dengan mencampur keduanya di level komponen dalam satu halaman yang sama.

Menurut glosarium resmi Next.js, PPR didefinisikan sebagai "optimasi rendering yang menggabungkan prerendering dan dynamic rendering dalam satu route, static shell disajikan langsung sementara konten dinamis di-stream saat siap, memberikan yang terbaik dari kedua strategi rendering." Bagian yang diprerender disebut static shell: struktur HTML yang sudah lengkap berisi semua konten statis ditambah fallback dari boundary Suspense untuk bagian yang belum siap.

Kenapa Ini Beda dari Streaming Biasa?#

Streaming lewat loading.js sudah ada sejak Next.js 13, tapi seluruh halaman baru mulai dikirim setelah request masuk. PPR mengirim static shell yang sudah diprerender di build time terlebih dulu, jadi bagian statis muncul instan tanpa menunggu server memproses apa pun, baru kemudian bagian dinamis di-stream menyusul di dalam boundary yang sama.

Bagaimana Cara Kerja PPR Setelah Next.js 16?#

PPR tidak lagi jadi flag terpisah yang harus diaktifkan sendiri. Sesuai dokumentasi resmi opsi cacheComponents, mengaktifkan cacheComponents: true di next.config.ts otomatis membuat PPR jadi perilaku default App Router:

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  cacheComponents: true,
};
 
export default nextConfig;

Flag experimental.ppr di level konfigurasi dan experimental_ppr di level route segment yang dipakai eksperimen sejak Next.js 14-15 sudah dihapus total di Next.js 16, digantikan satu opsi cacheComponents yang mengatur PPR, use cache, dan dynamicIO sekaligus sebagai satu konfigurasi terpadu. Artikel Cache Components Next.js 16 di blog ini membahas lebih dalam soal directive use cache, cacheLife, dan cacheTag yang jadi pasangan kerja PPR untuk mengatur bagian mana yang di-cache dan berapa lama.

Menandai Batas Statis dan Dinamis#

Batas antara static shell dan konten yang di-stream ditentukan lewat komponen <Suspense> bawaan React:

import { Suspense } from "react";
 
export default function Page() {
  return (
    <main>
      <StaticHeader />
      <Suspense fallback={<ProductSkeleton />}>
        <DynamicProductList />
      </Suspense>
    </main>
  );
}

StaticHeader diprerender jadi bagian static shell karena tidak memakai API request-time apa pun. DynamicProductList yang membaca cookies(), headers(), atau searchParams otomatis opt-in ke dynamic rendering, tapi karena dibungkus <Suspense>, fallback-nya (ProductSkeleton) ikut masuk static shell, sementara konten aslinya di-stream begitu selesai dirender di server.

Ringkasan#

• PPR menggabungkan static shell hasil prerender dengan konten dinamis yang di-stream, dalam satu route, lewat batas <Suspense>.
• Sejak Next.js 16, PPR sudah stabil dan otomatis aktif lewat opsi cacheComponents: true, menggantikan flag eksperimental ppr di Next.js 14-15.
• PPR bekerja berpasangan dengan directive use cache (dibahas lengkap di Cache Components Next.js 16): PPR menentukan batas statis/dinamis, use cache menentukan cache data di dalamnya.
• Kalau proyekmu masih di Next.js 15 dan ingin migrasi untuk memakai PPR stabil ini, tim layanan web development bisa membantu audit dan eksekusi upgrade-nya.