Caching Strategy di Next.js 2026 – Yang Saya Pakai Sekarang
— NextJS, Caching, Performance, WebDev — 2 min read
Caching Strategy di Next.js 2026 – Yang Saya Pakai Sekarang
Halo teman-teman,
Caching adalah salah satu hal yang paling sering bikin bingung di Next.js, terutama sejak App Router. Setelah coba berbagai kombinasi, ini pendekatan yang paling sering saya pakai sekarang.
1. Pahami Dulu Jenis Cache-nya
Saya bedakan 3 level:
- Request Memoization → React
cache()(satu request saja) - Data Cache →
fetchcache /unstable_cache - Full Route Cache → Static rendering
2. Strategi yang Saya Ikuti
A. Data yang jarang berubah
import { unstable_cache } from "next/cache";
const getProducts = unstable_cache( async () => { return await db.product.findMany(); }, ["products"], { revalidate: 3600 }, // 1 jam);B. Data yang cukup sering berubah
Saya pakai revalidate: 60 atau revalidateTag.
C. Data yang harus selalu fresh
fetch(url, { cache: "no-store" });3. Revalidation yang Saya Suka
- Time-based (
revalidate: number) → simple dan predictable - On-demand (
revalidateTag/revalidatePath) → lebih powerful
Saya sering kombinasi keduanya.
4. Hal yang Saya Hindari
- Jangan cache semua data secara default
- Jangan lupa invalidate cache setelah mutation
- Jangan over-cache data yang sangat personal / user-specific
5. Tips Praktis
- Mulai dengan static dulu, baru tambah dynamic kalau perlu
- Pakai
loading.tsxsupaya user tetap dapat feedback - Monitor cache hit rate di production
- Dokumentasikan tag yang dipakai biar gampang di-revalidate
Kesimpulan
Caching di Next.js bukan soal “cache sebanyak mungkin”. Itu soal menemukan balance antara freshness dan performance.
Kalau caching strategy kalian masih berantakan, coba mulai dari memisahkan data yang “boleh stale” dan yang “harus fresh”.
Pertanyaan buat kalian:
Bagaimana cara kalian mengatur caching di Next.js sekarang?
Lebih sering pakai time-based atau on-demand revalidation?
Cerita di komentar yuk!
— Ady Rahmansyah Software Engineer | Tech Blogger | Coffee Addict