Cara Revalidate Data Server Component Next Js setelah Mutasi Berhasil

Ditulis oleh Next.js

Setelah mutasi berhasil, panggil revalidateTag() atau revalidatePath() dari dalam Server Action. Langkah yang paling sering terlewat adalah memberi tag pada fetch() di Server Component dulu, karena tanpa tag Next.js tidak tahu cache mana yang harus dibuang.

Pilih Pola Revalidate yang Sesuai Kebutuhan Data

Next.js App Router menyimpan hasil fetch() di Data Cache. Kamu perlu memilih cara membatalkannya secara eksplisit.

  • Time-based: pakai next: { revalidate: 60 } untuk data yang boleh basi sebentar, seperti daftar artikel.
  • revalidateTag: cocok untuk data list yang tampil di banyak halaman, contoh tag products.
  • revalidatePath: cocok untuk halaman detail spesifik, contoh /products/123.

Memakai cache: 'no-store' atau export const dynamic = 'force-dynamic' untuk semua fetch membuat setiap request kena database. Pakai itu hanya untuk data yang memang harus real-time seperti keranjang belanja.

Langkah Revalidate Data Server Component Next Js

1. Tambahkan tag pada fetch di Server Component:

const res = await fetch(`${process.env.API_URL}/products`, {
  next: { tags: ['products'] }
});

2. Panggil revalidate dari Server Action setelah mutasi dan validasi sukses:

'use server';
import { revalidateTag } from 'next/cache';

export async function createProduct(formData: FormData) {
  const name = String(formData.get('name') ?? '');
  if (!name) throw new Error('Nama wajib diisi');
  await db.product.create({ data: { name } });
  revalidateTag('products');
}

3. Kembali ke halaman list dan pastikan data baru tampil tanpa reload manual. Jika belum berubah, cek apakah path fetch dan tag-nya sama persis.

BACA JUGA:

Perbandingan Metode Revalidate Server Component

Metode Kasus Cocok Catatan Cache
revalidateTag List produk, list post Hapus semua fetch dengan tag sama
revalidatePath Detail setelah edit Hapus cache path tertentu saja
Time-based Homepage, katalog publik Otomatis basi setelah interval

Validasi selalu jalan di server sebelum revalidate. Jangan panggil revalidateTag kalau insert ke database gagal, nanti cache terbuang sia-sia.

FAQ

Apakah revalidateTag bisa dipakai tanpa fetch tag?

Tidak bisa. Panggilan tersebut tidak error, tapi tidak menghapus cache apa pun.

Kenapa data masih lama setelah revalidatePath?

Kemungkinan fetch memakai no-store yang salah sasaran atau ada router cache client yang butuh navigasi ulang.

Apakah Client Component bisa memanggil revalidate langsung?

Tidak bisa. Client Component harus memanggil Server Action, lalu Server Action yang memanggil revalidate.

Artikel Terkait