Pindah Rute Lebih Cepat dengan Cara Navigate tanpa Reload Next Js

Ditulis oleh Next.js

Cara navigate tanpa reload di Next.js App Router adalah memakai komponen Link dari next/link untuk pindah halaman dan useRouter dari next/navigation untuk navigasi dari kode. Keduanya menjaga navigasi client-side sehingga layout yang sama tidak dirender ulang penuh dan state React tetap terjaga.

Gunakan Link untuk Navigasi Tanpa Reload

Tag a biasa memicu request dokumen baru ke server. Link mencegat klik tersebut, memuat rute tujuan sebagai React Server Component payload, lalu menukar segmen yang berubah saja.

import Link from 'next/link';

export default function Menu() {
  return (
    <nav>
      <Link href="/produk">Produk</Link>
      <Link href="/produk/meja-kayu">Detail Produk</Link>
    </nav>
  );
}
  • Gunakan Link untuk hampir semua navigasi antar halaman, termasuk ke dynamic route seperti /produk/[slug].
  • Prefetch bawaan mempercepat klik karena Next.js mengunduh rute yang kemungkinan dibuka. Ini paling terasa pada daftar produk, menu, dan pagination.
  • Matikan prefetch dengan prefetch={false} hanya untuk daftar link sangat banyak, rute berat yang jarang diklik, atau saat ingin menghemat bandwidth.

Navigasi dari Kode dengan useRouter

Gunakan useRouter saat perpindahan terjadi setelah event, misalnya submit form, login berhasil, atau tombol kembali.

  1. Tambahkan "use client" di baris pertama file karena hook ini hanya jalan di Client Component.
  2. Import router dengan import { useRouter } from 'next/navigation'.
  3. Panggil router.push('/dashboard') untuk menambah riwayat atau router.replace('/login') untuk menimpa riwayat.
"use client";
import { useRouter } from 'next/navigation';

export default function TombolBayar() {
  const router = useRouter();
  return (
    <>
      <button onClick={() => router.push('/checkout')}>Bayar</button>
      <button onClick={() => router.replace('/login')}>Login</button>
      <button onClick={() => router.back()}>Kembali</button>
      <button onClick={() => router.refresh()}>Muat ulang data</button>
    </>
  );
}
  • Jangan import dari next/router. Path itu milik Pages Router dan tidak cocok untuk App Router.
  • Jangan panggil useRouter di Server Component. Pindahkan tombol navigasi ke Client Component kecil lalu render dari server.
  • Jangan pakai window.location.href untuk rute internal karena selalu reload penuh.

BACA JUGA:

Perbandingan Pola Navigasi App Router

Pola Fungsi Catatan
Link Navigasi deklaratif Prefetch otomatis, pilihan utama
push Pindah dan simpan riwayat Cocok setelah submit form
replace Pindah tanpa simpan riwayat Cocok setelah login atau logout
back / forward Riwayat browser Untuk tombol kembali custom
  • Pilih Link untuk menu, kartu produk, dan UI dinamis yang bisa dirender sebagai link.
  • Pilih push setelah form checkout, filter, atau wizard selesai agar pengguna bisa tekan kembali.
  • Pilih replace setelah auth agar halaman login tidak bisa dibuka lagi dengan tombol back.

FAQ

Apakah router.push menyebabkan reload penuh?

Tidak, selama dipakai di App Router dengan import dari next/navigation untuk rute internal.

Kenapa halaman tetap reload saat pakai Link?

Umumnya karena href mengarah ke domain lain, memakai tag a biasa, atau full reload dipicu perubahan yang memang butuh dokumen baru.

Kapan memakai router.refresh setelah navigate?

Pakai setelah data server berubah, misalnya selesai membuat pesanan, agar Server Component mengambil data terbaru tanpa reload.

Artikel Terkait