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`](https://nextjs.org/docs/app/api-reference/directives/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](https://nextjs.org/docs/app/api-reference/directives/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:

```ts
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`](https://nextjs.org/docs/app/api-reference/functions/cacheLife)
- **`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?](/blog/revalidatepath-vs-revalidatetag-nextjs).

```ts
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:

| Jenis konten | Contoh | Pendekatan |
| --- | --- | --- |
| Statis nyaris permanen | Halaman legal, changelog | `"use cache"` + `cacheLife("max")` |
| Berubah saat event tertentu | Artikel dipublikasikan, produk diperbarui admin | `"use cache"` + `cacheTag()` + `revalidateTag` |
| Sepenuhnya dinamis per pengguna | Keranjang belanja, dashboard personal | Tanpa `"use cache"`, dibungkus Suspense |

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?](/blog/revalidatepath-vs-revalidatetag-nextjs)
  dan [cara upgrade Next.js 15 ke Next.js 16](/blog/cara-upgrade-nextjs-15-ke-16-langkah-demi-langkah)
  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](/layanan)
  yang ditawarkan.