Digital Transformation
Revalidate Tag
Mekanisme Next.js untuk memberi label pada hasil fetch agar bisa dibatalkan dan dimuat ulang secara selektif saat data sumber berubah.
TL;DR: Revalidate Tag adalah mekanisme di Next.js App Router yang memungkinkan tim memuat ulang konten halaman tertentu saat data sumber berubah, tanpa menunggu masa cache habis. Tag bertindak seperti label yang dilekatkan pada hasil fetch, lalu dipanggil ulang ketika perlu diperbarui.
Apa itu Revalidate Tag?
Revalidate Tag adalah fitur Next.js untuk menandai hasil pengambilan data dengan satu atau beberapa label, kemudian membuat ulang halaman yang menggunakannya hanya saat label tersebut dibatalkan. Pada praktiknya, developer memanggil fetch(url, { next: { tags: ['articles'] } }). Saat redaksi mempublikasikan artikel baru, fungsi revalidateTag('articles') dipicu lewat webhook CMS, dan Next.js akan membangun ulang halaman terkait di kunjungan berikutnya. Pola ini sering dipasangkan dengan strategi SSG dan ISR untuk menjaga halaman tetap statis namun selalu segar.
Bagi marketer, manfaat utamanya adalah kontrol granular. Tidak perlu menunggu 60 detik atau 1 jam revalidasi otomatis. Konten baru bisa muncul dalam hitungan detik setelah dipublikasikan.
Cara Kerja dan Kasus Pakai
| Skenario | Tag yang dipasang | Pemicu revalidasi |
|---|---|---|
| Artikel publikasi baru | articles, article:slug | Webhook setelah insert CMS |
| Produk e-commerce update | products, product:sku | Event admin save |
| Glosarium tambah istilah | glossary | Webhook publish |
| Halaman pricing diubah | pricing | Manual dari dashboard admin |
Dokumentasi resmi tersedia di Next.js Data Cache and Revalidate. Pengelolaan tag yang rapi mencegah kebocoran data lama ke pengguna.
Kenapa Penting?
Tanpa revalidate tag, tim sering kompromi antara halaman statis cepat dan konten segar. Dengan tag, keduanya bisa berjalan bersama. Saat saya menerapkan pola ini di Atmo LMS, halaman daftar materi tetap di-cache di edge dengan time to first byte di bawah 200 ms, namun materi baru tampil tanpa delay setelah tutor mempublikasikan. Untuk personal brand atau bisnis kecil, fitur ini menutup celah antara performa dan responsivitas konten.
Pertanyaan Umum
Apa beda revalidate tag dengan revalidate path?
Revalidate path menargetkan URL halaman, sementara revalidate tag menargetkan satu atau banyak fetch yang punya label sama, dan bisa dipanggil dari mana saja di server.
Apakah revalidate tag berbayar di Vercel?
Pemanggilan revalidate sendiri tidak berbayar terpisah. Yang dihitung adalah eksekusi function dan bandwidth ketika halaman dibangun ulang.