FluentStack

URL State

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 16: Frontend ArchitectureAdvanced65 menitBahasa Indonesia

URL State

Menaruh filter, pencarian, pagination, dan pilihan yang dapat dibagikan di URL tanpa menjadikan semua interaksi UI sebagai query parameter.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Mengidentifikasi state yang harus selamat saat refresh atau dapat dibagikan lewat URL
  • Membedakan filter data dari UI panel filter yang membukanya
  • Menyusun query parameter yang memiliki default dan parsing yang eksplisit
  • Menghindari URL sebagai tempat untuk setiap detail visual sementara
URL StateNext.jsSearch ParamsProduct UX

Isi lesson

6 blok
  1. 1.
    URL adalah contract untuk keadaan yang dapat dibuka kembaliBelum selesaiWajib
  2. 2.
    Membuat URL course list dari filter shareableBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    URL state adalah input yang perlu divalidasiBelum selesaiOpsional
  6. 6.
    RingkasanBelum selesaiWajib

URL adalah contract untuk keadaan yang dapat dibuka kembali

Wajib

Ketika learner mencari course dengan query, memilih level, lalu membuka page kedua, URL yang mewakili keputusan tersebut memberi dua manfaat nyata: refresh tidak menghapus konteks dan link dapat dibagikan ke orang lain. URL state juga membuat browser back, forward, bookmark, serta analytics memiliki arti yang konsisten. Sebaliknya, isFilterPanelOpen, tooltip yang sedang terlihat, dan focus input tidak perlu masuk URL karena tidak membantu orang lain memahami hasil yang sedang dilihat.

Jaga parameter kecil, bernama jelas, dan memiliki default. URL bukan database untuk seluruh object filter atau setiap keystroke sementara. Tentukan juga siapa yang membaca parameter dan kapan nilai tidak valid dikembalikan ke default aman. Pada App Router, search params menjadi input page atau client interaction yang perlu diperlakukan sebagai input eksternal, bukan sekadar string acak yang langsung dipercaya.

Bagian ini memengaruhi progres lesson.

Membuat URL course list dari filter shareable

Wajib
ts
type CourseFilter = {
  query: string;
  level: "beginner" | "intermediate" | "advanced";
  page: number;
};

export function getCourseListUrl(filter: CourseFilter) {
  const params = new URLSearchParams();

  if (filter.query) params.set("query", filter.query);
  params.set("level", filter.level);
  params.set("page", String(filter.page));

  return "/courses?" + params.toString();
}

Function ini mengubah keputusan yang terlihat user menjadi link yang dapat dibuka ulang. Di page nyata, parse query, level, dan page dengan default sebelum melakukan query data. Jangan ikut menaruh isFilterPanelOpen ke URL: ia hanya menentukan apakah control terlihat, bukan course mana yang menjadi hasil catalog.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Move course filter to URL state

Buat URL catalog dari query, level, dan page agar hasil course dapat di-refresh serta dibagikan tanpa menyimpan detail panel UI.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis4 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah pasangan yang paling tepat untuk URL state pada halaman catalog course?

Progres lesson naik setelah jawaban benar.

Catatan penting

Opsional

URL state adalah input yang perlu divalidasi

User dapat mengedit query parameter secara manual atau membuka link lama. Parse page sebagai angka yang aman, batasi enum seperti level, dan tentukan default bila nilai tidak valid. Jangan mengasumsikan parameter URL selalu memenuhi type internal hanya karena TypeScript memberi type yang rapi setelah parsing.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Gunakan URL state untuk keputusan data yang perlu selamat saat refresh atau dapat dibagikan.
  • Filter, search, sort, dan pagination adalah kandidat yang umum; panel UI yang membukanya biasanya bukan.
  • Parameter perlu nama jelas, default, serta parsing yang defensif.
  • Jangan menaruh data sensitif atau detail visual sementara di URL.
  • Berikutnya, kita menjaga state interaksi yang tidak perlu dibagikan tetap dekat component pemiliknya.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: URL adalah contract untuk keadaan yang dapat dibuka kembali.

Memuat progresReview module