revalidatePath vs revalidateTag: Kapan Pakai?

revalidatePath menghapus cache untuk satu path halaman atau layout tertentu saja, sedangkan revalidateTag menghapus cache untuk semua data yang ditandai tag tertentu di seluruh halaman yang memakai tag itu. Keduanya fungsi on-demand revalidation di Next.js App Router, tapi cakupannya berbeda: revalidatePath bekerja per-route, revalidateTag bekerja lintas-route berdasarkan label data.

Ringkasan cepat:

1. revalidatePath(path) menyegarkan satu halaman atau layout spesifik berdasarkan struktur file route-nya.
2. revalidateTag(tag) menyegarkan semua data yang ditandai tag tertentu, di mana pun tag itu dipakai lintas halaman.
3. Keduanya tidak saling menggantikan — sering dipanggil bersamaan di satu Server Action untuk konsistensi data penuh.
4. Sejak Next.js 16, revalidateTag butuh argumen kedua (profile), signature satu argumen resmi deprecated.
5. Revalidasi baru benar-benar terjadi saat path/tag itu dikunjungi ulang, bukan langsung memicu banyak render di belakang layar.

Apa Itu revalidatePath dan Bagaimana Cara Kerjanya?#

revalidatePath menerima path sebagai string, mengikuti struktur file route Next.js, bukan URL yang tampil di address bar browser. Menurut dokumentasi resmi Next.js, fungsi ini hanya bisa dipanggil di Server Function (termasuk Server Action) dan Route Handler — tidak bisa dipanggil dari Client Component karena murni berjalan di server.

"use server";
 
import { revalidatePath } from "next/cache";
 
export async function submit() {
  await submitForm();
  revalidatePath("/blog");
}

Path literal seperti /blog/post-1 cukup ditulis apa adanya. Untuk route dinamis seperti /blog/[slug], tambahkan parameter kedua type ("page" atau "layout") supaya Next.js tahu ingin menyegarkan semua halaman yang cocok dengan pola itu, bukan satu slug spesifik saja. Menyegarkan seluruh cache aplikasi bisa dilakukan lewat revalidatePath("/", "layout").

Route Handler vs Server Action untuk revalidatePath#

Perilakunya sedikit berbeda tergantung tempat dipanggil: di Server Action, UI halaman yang sedang dilihat pengguna diperbarui langsung; di Route Handler, path hanya ditandai untuk disegarkan pada kunjungan berikutnya — tidak memicu render ulang seketika saat fungsi dipanggil.

Apa Itu revalidateTag dan Bagaimana Cara Kerjanya?#

revalidateTag bekerja di level data, bukan di level path. Data ditandai tag lewat opsi next.tags pada fetch, lalu satu panggilan revalidateTag menyegarkan semua halaman yang memakai tag itu, tidak peduli path-nya berbeda-beda.

// Menandai data saat fetch
fetch("https://api.contoh.com/artikel", {
  next: { tags: ["artikel"] },
});

"use server";
 
import { revalidateTag } from "next/cache";
 
export async function tambahArtikel() {
  await simpanArtikelKeDatabase();
  revalidateTag("artikel", "max");
}

Poin penting yang sering terlewat: dokumentasi resmi revalidateTag kini mewajibkan argumen kedua sejak Next.js 16 —

The single-argument form revalidateTag(tag) is deprecated. It currently works if TypeScript errors are suppressed, but this behavior may be removed in a future version. Update to the two-argument signature.

— Dokumentasi resmi Next.js, fungsi revalidateTag

Argumen kedua yang direkomendasikan adalah string "max", memberi perilaku stale-while-revalidate: konten lama tetap ditampilkan sambil data baru diambil di latar belakang, baru dipakai pada kunjungan berikutnya. Proyek yang masih memakai Next.js 15 tetap bisa memanggil revalidateTag(tag) satu argumen (kode ini yang dipakai situs ini sendiri saat masih di Next.js 15.5), tapi sebaiknya mulai direncanakan migrasi ke signature baru sebelum upgrade ke Next.js 16.

Kapan Pakai revalidatePath vs revalidateTag?#

Aturan praktis: pakai revalidatePath kalau perubahan hanya relevan untuk satu route yang sedang dilihat pengguna itu sendiri. Pakai revalidateTag kalau data yang sama dipakai ulang di banyak tempat, supaya tidak perlu menulis daftar path satu per satu setiap kali strukturnya berubah.

Bisakah Keduanya Dipakai Bersamaan?#

Bisa, dan pola ini justru direkomendasikan untuk konsistensi data penuh. Contoh Server Action yang menggabungkan keduanya:

"use server";
 
import { revalidatePath, revalidateTag } from "next/cache";
 
export async function updatePost(id: string) {
  await updatePostInDatabase(id);
 
  revalidatePath(`/blog/${id}`); // Segarkan halaman yang sedang dilihat
  revalidateTag("posts", "max"); // Segarkan semua halaman lain yang pakai tag "posts"
}

revalidatePath memastikan halaman yang baru saja diedit pengguna langsung terasa segar, sementara revalidateTag menjangkau halaman lain (dashboard, daftar arsip, halaman kategori) yang menampilkan data sama tapi tidak sedang dibuka pengguna itu saat ini.

Ringkasan#

• revalidatePath menyegarkan satu path halaman/layout berdasarkan struktur file route; revalidateTag menyegarkan semua halaman yang memakai tag data tertentu, lintas path.
• Sejak Next.js 16, revalidateTag butuh argumen kedua profile (rekomendasi "max") — signature satu argumen dinyatakan deprecated di dokumentasi resmi.
• Keduanya sering dipanggil bersamaan di satu Server Action: revalidatePath untuk halaman yang sedang dilihat, revalidateTag untuk data yang sama di halaman lain.
• Pola revalidasi ini melengkapi Server Actions Next.js untuk pemula yang sudah dibahas sebelumnya — kedua fungsi ini yang paling sering dipanggil di dalam Server Action setelah proses mutasi data selesai.
• Butuh bantuan mengaudit atau mengimplementasikan strategi caching Next.js App Router seperti ini di proyek sendiri? Lihat layanan web development yang ditawarkan.