Tanpa Reload Penuh: Cara Refresh Router App Router Next Js

Ditulis oleh Next.js

Cara refresh router App Router Next.js tanpa reload penuh adalah memanggil router.refresh() dari Client Component. Fungsi ini meminta ulang Server Component di rute aktif tanpa mengganti URL dan tanpa mereset state client yang tidak terkait. Panggil setelah mutasi data, setelah Server Action selesai, atau dari tombol muat ulang manual.

"use client";
import { useRouter } from "next/navigation";

export default function RefreshButton() {
  const router = useRouter();
  return <button onClick={() => router.refresh()}>Muat ulang data</button>;
}

Pakai router.refresh() untuk Muat Ulang Data Server

Import useRouter selalu dari next/navigation, bukan next/router. Hook itu hanya berjalan di Client Component, jadi file tombol atau form harus diawali “use client”.

  1. Tandai komponen interaktif dengan “use client”.
  2. Ambil router dengan const router = useRouter().
  3. Panggil router.refresh() setelah mutasi berhasil, bukan sebelum request selesai.
  4. Gunakan sebagai aksi eksplisit, misalnya tombol simpan, filter, atau sinkron ulang.

Syarat agar Refresh Benar-Benar Mengambil Data Baru

Refresh tidak selalu berarti data berubah. Hasilnya bergantung dari mana data dibaca dan apakah responsnya di-cache.

  • Yang di-fetch ulang adalah Server Component pada rute aktif; Client Component tidak di-render ulang dari server.
  • Fetch yang memakai cache bawaan bisa mengembalikan data lama walaupun refresh sudah dipanggil.
  • Gunakan revalidatePath() atau revalidateTag() di server untuk menandai cache yang harus diperbarui.
  • Jangan mematikan cache global hanya supaya refresh terlihat bekerja; perbaiki tag atau jalur revalidasi yang terlalu lama.

BACA JUGA:

Perbandingan Refresh, Navigasi Ulang, dan Reload Browser

Refresh mempertahankan pathname, search params, dan sebagian besar state Client Component. Browser reload membuang semuanya dan meminta ulang halaman penuh.

Aksi Efek di App Router Kapan dipakai
router.refresh() Fetch ulang Server Component Setelah mutasi atau revalidasi
router.replace() Pindah URL tanpa riwayat baru Ubah query atau redirect halus
window.location.reload() Reload penuh dari browser Hanya saat state browser rusak

Pola Server Action yang benar adalah validasi dan simpan data di server, panggil revalidasi, lalu biarkan client memanggil refresh. Jangan memanggil API revalidasi langsung dari browser.

FAQ

Kenapa router.refresh() tidak mengubah tampilan?

Kemungkinan data masih diambil dari cache fetch; revalidasi path atau tag yang dipakai query tersebut.

Apakah refresh mengubah URL?

Tidak, URL tetap sama dan riwayat navigasi tidak bertambah.

Bisakah router.refresh() dipakai di Server Component?

Tidak, panggil dari Client Component atau picu dari event client setelah Server Action selesai.

Artikel Terkait