`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](https://nextjs.org/docs/app/api-reference/functions/revalidatePath),
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.

```ts
"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.

> **Route Handlers**: Marks the path for revalidation. The revalidation is
> done on the next visit to the specified path. This means calling
> `revalidatePath` with a dynamic route segment will not immediately
> trigger many revalidations at once. The invalidation only happens when
> the path is next visited.
>
> — [Dokumentasi resmi Next.js, fungsi revalidatePath](https://nextjs.org/docs/app/api-reference/functions/revalidatePath)

## 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.

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

```ts
"use server";

import { revalidateTag } from "next/cache";

export async function tambahArtikel() {
  await simpanArtikelKeDatabase();
  revalidateTag("artikel", "max");
}
```

Poin penting yang sering terlewat: [dokumentasi resmi `revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/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](https://nextjs.org/docs/app/api-reference/functions/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?

| Aspek | `revalidatePath` | `revalidateTag` |
| --- | --- | --- |
| Cakupan | Satu path halaman/layout spesifik | Semua halaman yang memakai tag yang sama |
| Dasar penandaan | Struktur file route (`page.tsx`/`layout.tsx`) | Opsi `next: { tags: [...] }` pada `fetch`, atau `cacheTag()` |
| Cocok untuk | Menyegarkan satu halaman yang baru diubah penggunanya sendiri | Data yang ditampilkan ulang di banyak halaman berbeda (mis. daftar artikel di beranda + kategori) |
| Contoh kasus | User submit form profil, ingin `/profil` langsung ter-update | Admin tambah produk baru, ingin semua halaman yang menampilkan daftar produk ikut segar |
| Argumen wajib | `path` (string), `type` opsional | `tag` (string), `profile` wajib sejak Next.js 16 |

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:

```ts
"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: Cakupan Path vs Tag, Argumen `profile` Wajib, dan Kombinasi Keduanya

- `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](/blog/server-actions-nextjs-untuk-pemula) yang sudah dibahas sebelumnya — kedua fungsi ini yang paling sering dipanggil di dalam Server Action setelah proses mutasi data selesai.
- Di Next.js 16, `revalidateTag` juga jadi pasangan langsung `cacheTag()` dari model [Cache Components: panduan lengkap use cache, cacheLife, cacheTag](/blog/cache-components-nextjs-16-panduan-lengkap) — data yang ditandai `cacheTag()` di sana dihapus manual lewat `revalidateTag` yang dibahas di artikel ini.
- Butuh bantuan mengaudit atau mengimplementasikan strategi caching Next.js App Router seperti ini di proyek sendiri? Lihat [layanan web development](/layanan) yang ditawarkan.