Caching: Data Tidak Perlu Diambil Ulang

Kenapa ada cache?

Tanpa cache, setiap pengunjung memicu request baru ke API atau database. Dengan cache, Next.js menyimpan hasil fetch dan memakainya ulang. Situs jadi cepat dan tagihan API tidak membengkak.

Empat lapis cache

Next.js punya empat mekanisme cache yang bekerja berlapis:

1. Request memoization. Fetch dengan URL dan opsi sama dalam satu render hanya dieksekusi sekali, walau dipanggil di banyak komponen.
2. Data cache. Hasil fetch disimpan antar request dan antar user. Ini yang paling sering kamu atur.
3. Full route cache. HTML hasil render disimpan, jadi halaman tidak di-render ulang setiap dibuka.
4. Router cache. Di browser, Next.js menyimpan halaman yang pernah dikunjungi selama sesi.

Mengatur data cache

Secara default fetch di Server Component di-cache. Kamu bisa mengatur perilakunya:

// Selalu ambil baru, tanpa cache
const res = await fetch("https://api.example.com/live", {
  cache: "no-store",
});

// Cache selama 60 detik
const res2 = await fetch("https://api.example.com/produk", {
  next: { revalidate: 60 },
});

Kapan mematikan cache?

Matikan cache (no-store) untuk data yang harus selalu segar: saldo, notifikasi, atau data real-time. Untuk konten yang jarang berubah seperti daftar produk atau artikel, biarkan di-cache dengan revalidate yang wajar.

Kesalahan umum pemula

• Panik karena data tidak berubah. Sebelum menyalahkan API, cek opsi cache fetch-mu. Kemungkinan besar data masih di-cache.
• no-store di mana-mana karena trauma cache basi. Solusi yang benar adalah revalidate dengan durasi wajar, bukan mematikan cache total.
• Mengira dev mode sama dengan production. Perilaku cache di npm run dev bisa berbeda. Selalu uji perilaku cache lewat npm run build + npm start.

Latihan singkat

1. Buat halaman yang fetch API waktu (https://worldtimeapi.org/api/ip) dengan cache default, refresh beberapa kali, dan amati waktunya tidak berubah.
2. Ubah ke cache: "no-store" dan next: { revalidate: 10 }, bandingkan perilakunya masing-masing.

Rangkuman

• Next.js punya 4 lapis cache: request memoization, data cache, full route cache, router cache.
• fetch di server di-cache secara default; atur dengan cache: "no-store" atau next: { revalidate }.
• Matikan cache hanya untuk data real-time seperti saldo dan notifikasi.
• Kalau data "bandel" tidak berubah, curigai cache dulu sebelum menyalahkan API.

Catatan teknis: Cache bisa bikin bingung saat development karena data terlihat tidak berubah padahal API sudah update. Kalau datamu "bandel" tidak berubah, cek dulu opsi cache fetch-mu sebelum menyalahkan API. Di dev mode, perilaku cache kadang berbeda dengan production.