Cache Components Next.js 16: Panduan

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.

Ringkasan cepat:

1. Cache Components adalah model caching baru Next.js 16: data fetching dinamis secara default, developer menandai eksplisit bagian yang perlu di-cache lewat directive "use cache" di level route, komponen, atau fungsi — kebalikan dari caching implisit Next.js 15.
2. Fungsi atau komponen yang dipasangi "use cache" wajib berbentuk async, karena Next.js perlu menunggu (await) hasilnya sebelum menyimpannya ke cache.
3. cacheLife() mengatur durasi cache (stale, revalidate, expire) memakai profil bawaan seperti "max" atau objek kustom, sedangkan cacheTag() memberi label agar cache bisa dihapus manual lewat revalidateTag saat data sumbernya berubah.
4. Ada varian "use cache: private" untuk data spesifik per pengguna (misalnya isi keranjang belanja), disimpan terpisah dan tidak dibagikan antar user seperti cache publik biasa.
5. Directive "use cache" bisa ditulis di puncak file (semua export di file itu ikut di-cache) atau inline di dalam fungsi/komponen tertentu saja, sesuai kebutuhan granularitas.

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.

The use cache directive allows you to mark a route, React component, or a function as cacheable. It can be used at the top of a file to indicate that all exports in the file should be cached, or inline at the top of a function or component to cache the return value. Functions and components that use use cache must be async.

— Dokumentasi resmi Next.js, referensi directive use cache

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 }.

Client-side: How long the client can use cached data without checking the server. During this time, the client-side router displays cached content immediately without any network request. After this period expires, the router must check with the server on the next navigation or request. This provides instant page loads from the client cache, but data may be outdated.

— Dokumentasi resmi Next.js, referensi fungsi cacheLife, bagian stale

• 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: use cache, cacheLife, dan cacheTag sebagai Inti Cache Components#

• 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.