Digital Transformation
use cache (Direktif Cache Next.js)
TL;DR: use cache adalah direktif Next.js yang dipasang di awal fungsi, komponen, atau file untuk menyimpan hasilnya di server cache. Direktif ini menggantikan pendekatan fetch-with-cache lama, lebih eksplisit, dan bisa dikombinasikan dengan cacheLife serta cacheTag untuk kontrol revalidasi yang granular.
Apa itu Direktif use cache?
Direktif use cache adalah penanda pragma di Next.js, mirip use client atau use server, yang menandai entitas tertentu agar hasil eksekusinya disimpan di cache server. Direktif ini diumumkan Next.js sebagai bagian dari Dynamic IO sejak versi 15 dan distabilkan untuk produksi pada awal 2026. Ketika sebuah fungsi atau komponen ditandai use cache, Next.js menyimpan output-nya berdasarkan argumen yang masuk, sehingga panggilan dengan argumen sama akan menghasilkan cache hit alih-alih eksekusi ulang.
Direktif ini bekerja erat dengan data cache Next.js dan menjadi pengganti modern dari pola fetch({ next: { revalidate } }) yang sebelumnya dipakai untuk caching di App Router.
Tiga Lokasi Pemasangan use cache
| Lokasi | Efek |
|---|---|
| Di awal file | Seluruh ekspor di file tersebut otomatis di-cache |
| Di awal fungsi async | Hasil fungsi disimpan berdasarkan argumen |
| Di awal komponen async | Hasil render disimpan, di-share antar request |
Setiap entitas yang ditandai use cache otomatis menerima cacheLife default ("default", "minutes", "hours", "days", "weeks", "max") dan bisa dipanggil cacheTag(tag) untuk invalidasi terarah lewat revalidateTag(tag) di Server Action.
Kenapa Penting untuk Marketer?
Marketer jarang menyentuh kode caching, tapi keputusan caching menentukan kecepatan halaman yang berdampak pada Core Web Vitals dan ranking SEO. Direktif use cache memungkinkan developer me-cache komponen UI berat (misal grid testimoni, daftar artikel terkait) tanpa harus refactor menjadi fetch terpisah. Hasilnya halaman cepat tanpa kehilangan personalisasi di bagian dinamis.
Praktik di proyek client menunjukkan migrasi dari fetch-cache ke use cache memangkas waktu render server 30 sampai 60 persen pada halaman katalog dengan 50 item lebih, sambil memudahkan invalidasi via tag saat konten baru di-publish.
Pertanyaan Umum
Apakah use cache menggantikan unstable_cache?
Ya. Next.js merekomendasikan migrasi dari unstable_cache ke direktif use cache karena lebih ergonomis, type-safe, dan mendukung React Server Components dengan baik.
Apa beda use cache dengan ISR?
Incremental Static Regeneration berjalan di level halaman dengan revalidasi berbasis waktu. use cache berjalan di level fungsi/komponen dengan kontrol lebih granular via cacheLife dan cacheTag, dan bisa dipanggil dari banyak halaman sekaligus.