Page Server dan Client untuk Cara Membaca Search Params Next Js

Ditulis oleh Next.js

Cara membaca search params Next.js tergantung lokasi komponen. Page Server Component menerima prop searchParams langsung dari App Router. Client Component memakai hook useSearchParams() dari next/navigation. Salah pilih API membuat query terbaca kosong atau build error karena useSearchParams butuh Suspense.

Jawaban Cepat Sesuai Konteks Komponen

Untuk URL seperti /produk?kategori=sepatu&page=2, gunakan prop di server dan hook di client.

  • page.tsx Server: baca lewat parameter searchParams.
  • layout.tsx: tidak menerima searchParams, teruskan dari page atau baca di client.
  • Client Component interaktif: pakai useSearchParams() untuk filter tanpa reload.
  • Navigasi programatik: pakai useRouter() dan usePathname().
// app/produk/page.tsx
export default function Page({ searchParams }) {
  const kategori = searchParams?.kategori;
  return <p>Kategori: {kategori}</p>;
}

Cara Membaca Search Params di Server Component

Pola ini cocok untuk fetch awal, filter SEO, dan pagination.

  1. Buka app/[segmen]/page.tsx di App Router.
  2. Terima prop searchParams pada fungsi Page.
  3. Baca nilainya, misalnya searchParams.q.
  4. Tangani nilai kosong dan nilai array seperti ?tag=a&tag=b.
  • Semua nilai query bertipe string. Konversi manual untuk angka dengan Number().
  • Validasi sebelum dipakai ke database, misalnya cek panjang dan karakter.
  • Gunakan fallback bila filter tidak ada.
type Props = {
  searchParams: { q?: string; page?: string };
};

export default async function Page({ searchParams }: Props) {
  const q = searchParams.q ?? "";
  const page = Number(searchParams.page ?? "1") || 1;
  return <p>{q} halaman {page}</p>;
}

BACA JUGA:

Cara Membaca Search Params di Client Component

  1. Tambahkan “use client” di baris pertama file.
  2. Impor useSearchParams dari next/navigation.
  3. Ambil satu nilai dengan get(“kategori”).
  4. Ambil nilai ganda dengan getAll(“tag”).
  • Bungkus komponen pemakai useSearchParams() dengan <Suspense>.
  • Tanpa boundary tersebut, build static bisa gagal di Next.js versi baru.
  • Letakkan Suspense sedekat mungkin dengan komponen filter.
"use client";
import { useSearchParams, useRouter } from "next/navigation";

export default function Filter() {
  const params = useSearchParams();
  const router = useRouter();
  const aktif = params.get("kategori") ?? "semua";
  return <button onClick={() => router.push("?kategori=sepatu")}>
    Aktif: {aktif}
  </button>;
}

Perbandingan Pola dan Kesalahan Umum

Pola Fungsi Catatan
Server searchParams Baca query saat render server Cocok untuk data awal
Client useSearchParams Baca query reaktif di browser Wajib dalam Suspense
Navigasi router Ubah query tanpa reload penuh Gabung dengan pathname
  • Jangan tertukar params rute dinamis dengan searchParams query.
  • Jangan baca window.location.search untuk render awal karena merusak SSR.
  • Jangan memanggil hook navigasi di Server Component.
  • Membaca query di server membuat route tersebut dirender dinamis saat request.

FAQ

Apakah searchParams server bersifat dinamis?

Ya, Page yang membaca searchParams dirender per request karena nilainya baru diketahui saat URL dibuka.

Kapan memakai useSearchParams dibanding prop server?

Pakai hook saat UI harus bereaksi cepat seperti tab, filter, atau pencarian instan.

Mengapa useSearchParams meminta Suspense?

Next.js perlu me-render sisa halaman dulu sementara bagian query dibaca di client.

Artikel Terkait