Cache Components Next.js 16: Panduan Lengkap

Cache Components adalah model caching baru di Next.js 16: data fetching dinamis secara default, lalu bagian yang perlu disimpan sementara ditandai eksplisit lewat directive "use cache" di level route, komponen, atau fungsi. Model ini membalik total default caching implisit yang dipakai Next.js 15 dan versi-versi sebelumnya.

Apa Itu Cache Components di Next.js 16?#

Cache Components adalah fitur yang memberi kontrol granular atas caching: developer memilih sendiri route, komponen React, atau fungsi mana yang di-cache, bukan Next.js yang menebak secara otomatis. Menurut dokumentasi resmi directive use cache, directive ini bisa ditulis di puncak sebuah file (semua export di file itu ikut di-cache) atau inline di dalam fungsi/komponen tertentu saja.

Kenapa Perubahan Ini Penting#

Sebelum Next.js 16, banyak developer kesulitan menebak kapan sebuah fetch benar-benar di-cache dan kapan tidak, karena perilakunya implisit dan bergantung konfigurasi tersembunyi. Cache Components menghilangkan tebakan itu: setiap halaman, komponen, dan fungsi berjalan dinamis di request time secara default, kecuali developer secara sadar menandainya cacheable.

Bagaimana Cara Kerja Directive use cache?#

Directive ini dipasang sebagai baris pertama sebuah fungsi async atau file, mirip pola "use client"/"use server" yang sudah lebih dulu ada di App Router:

async function getArtikel(slug: string) {
  "use cache";
 
  const res = await fetch(`https://api.contoh.com/artikel/${slug}`);
  return res.json();
}

Syarat wajibnya: fungsi atau komponen yang dipasangi "use cache" harus berbentuk async, karena Next.js perlu menunggu hasilnya sebelum menyimpannya ke cache. Ada juga varian "use cache: private" untuk data yang spesifik per pengguna (misalnya isi keranjang belanja), yang disimpan terpisah dan tidak dibagikan antar user seperti cache publik biasa.

Apa Itu cacheLife dan cacheTag?#

Dua API pelengkap "use cache" yang mengatur durasi dan cara menghapus cache:

• cacheLife() mengatur tiga angka: stale (berapa lama nilai cache dipakai tanpa pengecekan ulang), revalidate (kapan pembaruan latar belakang dipicu), dan expire (batas maksimum sebelum entri dihapus paksa). Bisa memakai profil bawaan seperti "max", "hours", "days", atau objek kustom seperti { expire: 3600 }.
• cacheTag() memberi label pada data yang di-cache, supaya bisa dihapus manual lewat revalidateTag di Server Action begitu data sumbernya berubah — pola yang sudah dibahas di artikel revalidatePath vs revalidateTag: kapan pakai?.

import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from "next/cache";
 
async function getProduk(id: string) {
  "use cache";
  cacheLife("hours");
  cacheTag(`produk-${id}`);
 
  const res = await fetch(`https://api.contoh.com/produk/${id}`);
  return res.json();
}

Kapan Sebaiknya Pakai Cache Components?#

Tiga pola pemakaian yang paling umum:

Aturan praktisnya: mulai dari dinamis (default Next.js 16), lalu tambahkan "use cache" hanya pada bagian yang terbukti aman disimpan sementara — bukan sebaliknya menandai semuanya cacheable sejak awal lalu mencari bug data basi belakangan.

Ringkasan#

• Cache Components membalik default caching Next.js: dinamis dulu, di-cache hanya kalau ditandai eksplisit lewat "use cache".
• Fungsi/komponen yang memakai "use cache" wajib async; "use cache: private" tersedia untuk data spesifik per pengguna.
• cacheLife() mengatur durasi (stale/revalidate/expire), cacheTag() memberi label untuk dihapus manual lewat revalidateTag — lengkapi bacaan di revalidatePath vs revalidateTag: kapan pakai? dan cara upgrade Next.js 15 ke Next.js 16 kalau proyeknya masih di versi sebelumnya.
• Butuh bantuan mengaudit atau menerapkan strategi caching Next.js App Router seperti ini di proyek sendiri? Lihat layanan web development yang ditawarkan.