Digital Transformation
Cache Tag (Next.js)
TL;DR: Cache Tag adalah label string yang dilekatkan pada respons cache di Next.js App Router. Dengan tag, developer bisa membatalkan banyak halaman atau fetch sekaligus lewat satu panggilan
revalidateTag(), tanpa harus tahu URL persisnya. Pola ini menggantikan revalidasi berbasis path saat konten saling terhubung, misalnya artikel, kategori, dan sitemap.
Apa itu Cache Tag?
Cache Tag bekerja di atas fitur On-Demand ISR Next.js. Setiap kali kita memanggil fetch() atau menandai respons di server, kita bisa menambahkan satu atau beberapa tag. Tag ini disimpan di edge cache. Saat konten berubah, satu panggilan ke endpoint internal yang menjalankan revalidateTag('articles') akan memaksa semua halaman bertag itu rebuild di permintaan berikutnya.
Analoginya seperti label pada arsip. Kita tidak perlu mencari folder satu per satu. Cukup tarik semua arsip berlabel "klien-2026" untuk diperbarui. Bagi marketer yang memublikasi konten via dashboard internal, cache tag membuat invalidasi berskala besar tetap satu klik.
Cara Memakainya
| Langkah | Kode |
|---|---|
| Tandai fetch | fetch(url, { next: { tags: ['articles'] } }) |
| Tandai komponen | unstable_cache(fn, key, { tags: ['articles'] }) |
| Trigger invalidasi | revalidateTag('articles') di route handler |
Tag bersifat case-sensitive dan harus konsisten antara penandaan dan invalidasi. Praktik baiknya buat konstanta terpusat seperti CACHE_TAGS.ARTICLES.
Kenapa Penting?
Tanpa cache tag, satu artikel baru di Supabase memaksa kita mendaftar setiap URL yang harus di-revalidate. Halaman daftar, halaman detail, sitemap, RSS, dan menu kategori semua perlu dipanggil terpisah. Saat skala konten mencapai ribuan halaman, daftar URL jadi rapuh dan mudah terlewat.
Tag membuat invalidasi terpusat pada makna, bukan path. Di proyek Atmo LMS, tim Vito Atmo memakai 5 tag utama (articles, glossary, courses, sitemap, navigation), sehingga setiap publish konten cuma butuh dua panggilan tag. Waktu publish turun dari menit ke detik karena tidak ada lagi loop revalidate path manual.
Pertanyaan Umum
Apakah cache tag tersedia di semua platform hosting?
Saat tulisan ini dibuat per Mei 2026, cache tag berfungsi penuh di Vercel dan beberapa platform Next.js self-hosted yang mendukung revalidateTag. Hosting yang hanya menyajikan static export tidak mendukung fitur ini.
Berapa banyak tag yang aman per fetch?
Tidak ada batas keras, tapi praktik standar industri menyarankan 1-3 tag per resource agar mapping tetap mudah dilacak.
Istilah Terkait