Revalidasi: Menyegarkan Data yang Sudah Di-cache

Masalahnya

Data di-cache itu cepat, tapi bisa basi. Misal admin menambah produk baru, tapi halaman katalog masih menampilkan data lama karena cache belum kedaluwarsa. Solusinya: revalidasi, yaitu memaksa Next.js mengambil ulang data.

Revalidasi berbasis waktu

Cara paling sederhana, atur revalidate dalam detik saat fetch:

const res = await fetch("https://api.example.com/produk", {
  next: { revalidate: 3600 }, // segarkan tiap 1 jam
});

Ini disebut ISR (Incremental Static Regeneration). Pengunjung pertama setelah 1 jam mendapat halaman lama (cepat), lalu Next.js membangun ulang di background untuk pengunjung berikutnya.

Revalidasi on-demand

Untuk kontrol penuh, tandai fetch dengan tag lalu segarkan manual, misal setelah admin menyimpan data lewat Server Action:

// app/admin/actions.ts
"use server";

import { revalidateTag, revalidatePath } from "next/cache";

export async function tambahProduk(data: FormData) {
  await simpanKeDatabase(data);
  revalidateTag("produk"); // segarkan semua fetch bertag "produk"
  revalidatePath("/katalog"); // segarkan halaman /katalog
}

// saat fetch, beri tag
const res = await fetch("https://api.example.com/produk", {
  next: { tags: ["produk"] },
});

Pilih yang mana?

Pakai revalidate waktu untuk konten yang toleran basi (artikel, katalog). Pakai revalidateTag untuk aksi yang harus langsung terlihat (tambah/edit/hapus data oleh admin).

Kesalahan umum pemula

• Memanggil revalidatePath dari Client Component. Fungsi ini hanya jalan di server (Server Action / Route Handler). Dari browser, panggil via Server Action.
• Lupa memberi tags saat fetch. Tanpa tag, revalidateTag tidak punya target. Selalu pasangkan keduanya.
• Revalidasi terlalu agresif. Memanggil revalidate setiap detik sama saja mematikan cache. Sesuaikan dengan seberapa sering data berubah.

Latihan singkat

1. Buat Server Action tambahKomentar yang menyimpan komentar dummy lalu memanggil revalidatePath("/blog").
2. Tambahkan tags: ["komentar"] pada fetch komentar dan ganti revalidasi path menjadi revalidasi tag. Pastikan komentar baru langsung muncul.

Rangkuman

• Revalidasi menyegarkan data cache yang basi tanpa mematikan cache.
• revalidate: N untuk penyegaran berbasis waktu (ISR).
• revalidateTag / revalidatePath untuk penyegaran on-demand setelah mutasi data.
• Fungsi revalidasi hanya bisa dipanggil di server, bukan dari Client Component.

Catatan teknis: revalidatePath dan revalidateTag hanya bisa dipanggil di Server Action atau Route Handler, tidak bisa di Client Component. Kalau butuh dari browser, panggil lewat Server Action sebagai perantara.