Digital Transformation
use cache (Direktif Next.js)
`use cache` adalah direktif Next.js yang menandai komponen, fungsi, atau file agar hasilnya di-cache otomatis oleh framework untuk dipakai ulang antar request.
TL;DR:
use cacheadalah direktif Next.js yang memungkinkan komponen, fungsi, atau file di-cache otomatis pada level tertentu. Direktif ini memudahkan developer mengontrol caching tanpa perlu setup manual yang rumit, dan jadi fondasi strategi performance di Next.js modern.
Apa itu use cache?
use cache adalah direktif yang ditulis di baris pertama file, komponen, atau fungsi async. Ketika direktif ini ditambahkan, Next.js akan menangani caching hasil eksekusinya secara otomatis. Cache disimpan berdasarkan input fungsi, dan akan di-invalidate sesuai konfigurasi yang ditentukan, baik via revalidate-tag maupun TTL.
Analoginya sederhana. Bayangkan dapur restoran yang menyimpan kaldu siap pakai. Ketika ada pesanan baru, koki tidak perlu memasak kaldu dari nol. Yang dilakukan hanya mengambil kaldu yang sudah ada dan menambahkan bumbu sesuai pesanan. use cache melakukan hal yang sama untuk komponen dan fungsi Next.js.
Level Penggunaan use cache
| Level | Contoh Use Case |
|---|---|
| File | Seluruh fungsi di file di-cache, cocok untuk utility data fetcher |
| Komponen | Komponen yang outputnya tidak berubah per user, misal hero CMS |
| Fungsi | Fungsi data fetcher tertentu, misal ambil daftar kategori |
Direktif ini bekerja sama dengan Suspense Boundary untuk streaming. Bagian yang sudah di-cache muncul instan, bagian yang belum di-cache mengalir setelah selesai diproses.
Kenapa Penting?
Bagi marketer dan pemilik bisnis Indonesia, dampaknya terlihat dari waktu tampil halaman yang konsisten meski traffic naik. Bagi developer, use cache mengurangi boilerplate setup caching manual dan menjaga konsistensi di seluruh project. Per April 2026, kombinasi use cache dengan ISR jadi pola dominan untuk website Next.js skala menengah ke atas.
Pertanyaan Umum
Apakah use cache mengganti fetch caching?
Tidak. use cache melengkapi. fetch caching tetap berlaku untuk panggilan jaringan, sementara use cache membungkus seluruh fungsi atau komponen.
Bagaimana cara invalidate cache?
Lewat revalidateTag() atau revalidatePath(). Bisa juga set TTL eksplisit di konfigurasi cache.