Digital Transformation
Next.js Image Cache Policy
TL;DR: Next.js Image Cache Policy adalah konfigurasi yang menentukan berapa lama hasil optimasi
next/imagedisimpan di CDN dan browser. Tujuannya, halaman tetap cepat dan biaya transformasi gambar di Vercel atau Image Optimization API tidak membengkak. Defaultnya bergantung padaCache-Controlupstream, tapi praktik yang aman adalah setminimumCacheTTLminimal 60 detik di production.
Apa itu Next.js Image Cache Policy?
Next.js Image Cache Policy adalah aturan caching yang berlaku untuk gambar yang dilewatkan melalui komponen next/image. Komponen ini melakukan resize, format conversion, dan kompresi server-side, sehingga setiap permintaan baru tanpa cache akan memicu transformasi ulang yang berbiaya CPU dan bandwidth. Cache policy menentukan berapa lama hasil transformasi disimpan supaya request berikutnya cukup membaca dari edge cache. Konsep ini berdekatan dengan Edge Cache dan Last-Modified Header.
Sebagai gambaran, hosting gambar di Supabase Storage seperti yang saya pakai di vitoatmo.com mengembalikan Cache-Control: public, max-age=3600. Next.js menghormati nilai itu, tapi minimumCacheTTL di next.config.js menjadi fallback kalau upstream tidak set apa-apa.
Pilihan Konfigurasi
| Setting | Lokasi | Efek |
|---|---|---|
minimumCacheTTL | next.config.js | Durasi minimal cache (detik) untuk hasil optimasi. |
Cache-Control upstream | header CDN sumber | Override jika lebih agresif daripada minimumCacheTTL. |
images.formats | next.config.js | Mempengaruhi jumlah varian yang dicache (AVIF, WebP). |
images.deviceSizes | next.config.js | Menentukan breakpoint, makin banyak makin banyak cache entry. |
Empat tuas di atas saling terkait. Menaikkan jumlah format atau device size tanpa menaikkan TTL akan memperbesar permukaan cache miss dan akhirnya menggerus performa.
Kenapa Penting?
Pada audit performa beberapa website klien di awal 2026, saya menemukan halaman dengan minimumCacheTTL default 60 detik dan banyak hero image unik per landing page. Akibatnya, biaya Image Optimization meningkat sampai 3,2 kali lebih tinggi dari estimasi awal. Setelah kami menyetel TTL ke 31 hari (2.678.400 detik) dan menambah header Cache-Control di Supabase Storage, beban transformasi turun lebih dari 60 persen tanpa mengganggu LCP. Untuk marketer yang mengukur dampak teknis ke metrik bisnis, ini berkaitan langsung dengan Core Web Vitals.
Pertanyaan Umum
Apakah saya perlu mengubah Cache Policy untuk dynamic image?
Iya, terutama kalau Anda menggunakan <Image src={dynamicUrl} /> dengan URL yang sering berubah. Untuk konten editorial yang stabil, TTL panjang aman dan justru disarankan.
Bagaimana cara invalidasi cache kalau gambar berubah?
Cara paling aman adalah mengubah nama file atau menambahkan query string versi (misal ?v=2026-06). Edge cache akan memperlakukan URL baru sebagai entry baru.
Istilah Terkait