URL adalah kontainer status

• Struktur URL bekerja melampaui sekadar alamat, sebagai sarana untuk menyimpan dan memulihkan status aplikasi
• Seperti halaman unduhan PrismJS, ditunjukkan contoh di mana satu URL saja dapat mereproduksi sepenuhnya pengaturan tema, bahasa, dan plugin
• Tiap komponen seperti path, query parameter, dan fragment merepresentasikan berbagai status seperti navigasi hierarkis, pemfilteran, dan navigasi klien
• Hal-hal seperti filter pencarian, pagination, mode tampilan, dan rentang tanggal cocok dimasukkan ke URL, sedangkan informasi sensitif atau status UI sementara tidak cocok
• URL yang dirancang dengan baik meningkatkan kemudahan berbagi, prediktabilitas, dan efisiensi caching, serta memperkuat keandalan aplikasi web dan pengalaman pengguna

---

Potensi URL

• URL bukan sekadar alamat resource, tetapi juga berfungsi sebagai antarmuka pengguna (UI) dan kontainer status
  • Secara otomatis mempertahankan status dalam berbagi, bookmark, riwayat browser, deep link, dan sebagainya
  • Telah bekerja sebagai mekanisme dasar manajemen status web sejak 1991
• Setiap komponen URL merepresentasikan jenis status yang berbeda
  • Path: penjelajahan resource secara hierarkis (/users/123/posts)
  • Query: filter, opsi, dan pengaturan (?theme=dark&lang=en)
  • Fragment: lokasi di dalam dokumen atau routing SPA (#features, #/dashboard)
• Fitur Text Fragments memungkinkan tautan langsung ke teks tertentu di dalam halaman

Pola query parameter

• Menggunakan delimiter untuk menaruh beberapa nilai dalam satu key (?tags=frontend,react,hooks)
• Menserialisasi data bertingkat ke JSON atau Base64 (?config=eyJyaWNrIjoicm9sbCJ9==)
• Boolean flag direpresentasikan melalui keberadaan key (?mobile)
• Bracket notation mengekspresikan banyak nilai dalam bentuk tags[]=frontend&tags[]=react
  • Diakui otomatis oleh qs Node atau middleware Express, tetapi belum distandardisasi
• Intinya adalah menjaga konsistensi

Contoh representasi status melalui URL

• PrismJS: menyimpan seluruh pengaturan tema, bahasa, dan plugin di hash URL
• GitHub: menyorot rentang baris kode tertentu dengan #L108-L136
• Google Maps: memasukkan koordinat, level zoom, dan tipe peta ke dalam URL
• Figma: membagikan konteks kerja seperti posisi kanvas, zoom, dan elemen terpilih melalui URL
• Situs e-commerce: memulihkan status pencarian dengan memasukkan filter, pengurutan, dan rentang harga ke URL

Pola rekayasa frontend

• Status yang cocok dimasukkan ke URL
  • kata kunci pencarian, filter, halaman dan pengurutan, mode tampilan, rentang tanggal, tab aktif, konfigurasi UI, feature flag
• Status yang tidak cocok untuk URL
  • informasi sensitif seperti kata sandi dan token, status UI sementara, input yang belum disimpan, data berukuran besar, status frekuensi tinggi
• Kriteria penilaian: apakah pengguna lain harus melihat status yang sama saat mengklik URL yang sama

Implementasi JavaScript

• API URLSearchParams memungkinkan pembacaan dan penulisan query parameter
• pushState menambahkan entri riwayat baru, replaceState memperbarui entri saat ini
• Event popstate memulihkan UI saat pengguna menekan tombol kembali di browser

Implementasi React

• Hook useSearchParams dari React Router memungkinkan pengelolaan status URL secara ringkas
  • Saat membaca atau memperbarui parameter, URL dan UI otomatis tersinkronisasi

Praktik terbaik manajemen status URL

• Jangan masukkan nilai default ke URL (cukup pertahankan ?theme=dark, nilai default ditangani dalam kode)
• Cegah pembaruan URL berlebihan saat mengetik dengan debouncing (lodash.debounce)
• pushState vs replaceState
  • pushState: untuk status yang bisa ditelusuri kembali seperti perubahan filter atau perpindahan halaman
  • replaceState: untuk perubahan halus seperti input pencarian

Melihat URL sebagai kontrak

• URL yang dirancang dengan baik berperan sebagai kontrak eksplisit antara aplikasi dan pengguna
  • Menjelaskan batas antara status publik/pribadi, klien/server, dan status berbagi/sesi
• URL yang mudah dibaca menjelaskan maksud dan bisa dipahami manusia maupun mesin
  • Bentuk seperti example.com/products/laptop?color=silver&sort=price lebih unggul dalam menyampaikan makna
• Peningkatan efisiensi caching
  • URL yang sama dianggap sebagai resource yang sama sehingga tingkat cache hit meningkat
  • Variasi cache dapat dikendalikan dengan query parameter
• Manajemen versi dan eksperimen
  • API version dan pengujian A/B dapat dibedakan dengan ?v=2, ?beta=true, ?experiment=new-ui

Antipola yang harus dihindari

• Di SPA hanya mempertahankan status di memori, sehingga status hilang saat halaman dimuat ulang
• Memasukkan informasi sensitif ke URL (?password=secret123)
• Nama parameter yang tidak jelas (?foo=true&bar=2 alih-alih ?mobile=true&page=2)
• Mengenkode JSON kompleks ke Base64, sehingga menghasilkan URL yang terlalu panjang
• Melewati batas panjang URL (ada batasan dari browser, server, dan CDN)
• Melumpuhkan tombol kembali (terjadi jika replaceState disalahgunakan)

Kesimpulan

• URL yang baik bukan hanya menunjuk konten, tetapi juga mengekspresikan dialog antara pengguna dan aplikasi
• URL adalah sarana manajemen status tertua dan paling elegan untuk memuat niat, konteks, dan kemampuan berbagi
• Meski ada alat manajemen status kompleks seperti Redux, MobX, Zustand, dan Recoil,
  tidak melupakan fitur dasar bernama URL adalah kekuatan sejati web
• Aplikasi yang kehilangan status saat dimuat ulang sedang mengabaikan sifat hakiki web