0Pricing
HTML Academy · Pelajaran

Perutean Berbasis Hash vs Berbasis Jalur

Bandingkan perutean hash dengan perutean riwayat berbasis pushState.

Perutean Berbasis Hash vs Berbasis Jalur adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Dua Strategi untuk URL SPA

SPA memerlukan URL yang tidak diambil oleh peramban. Ada dua pendekatan: berbasis hash menggunakan fragmen (segala sesuatu setelah #) yang tidak pernah dikirim peramban ke server, dan berbasis jalur menggunakan jalur URL ditambah trik API Riwayat.

Perutean Berbasis Hash

URL terlihat seperti https://example.com/#/about. Server hanya melihat / dan menyajikan HTML yang sama untuk setiap URL. JavaScript klien membaca location.hash untuk menentukan tampilan yang akan ditampilkan. Sederhana dan tidak memerlukan konfigurasi server.

Peristiwa hashchange

Perute berbasis hash mendengarkan peristiwa hashchange, yang dipicu setiap kali location.hash berubah. Jika digabungkan dengan membaca window.location.hash, hanya itulah API yang diperlukan untuk perutean klien—tidak ada API Riwayat yang terlibat.

window.addEventListener("hashchange", () => {
  const route = location.hash.slice(1) || "/";
  renderPage(route);
});

Perutean Berbasis Jalur

URL terlihat seperti https://example.com/about—tidak dapat dibedakan dari URL yang dirender server. pushState pada API Riwayat mengubah jalur tanpa memuat ulang halaman; popstate dipicu saat kembali/maju; pencegatan klik mengubah <a> menjadi navigasi SPA.

Konfigurasi Server Diperlukan

Untuk perutean berbasis jalur, server harus mengembalikan index.html milik SPA untuk setiap jalur yang mungkin dimasukkan pengguna secara langsung (atau dimuat ulang). Jika tidak, memuat ulang /about akan menghasilkan 404. Konfigurasikan dengan mencoba berkasnya terlebih dahulu, lalu gunakan index.html sebagai cadangan (cadangan riwayat di Nginx, vite-plugin-history-api dalam pengembangan Vite).

# Nginx config
location / {
  try_files $uri $uri/ /index.html;
}

Optimisasi Mesin Pencari dan Berbagi

Mesin pencari dan banyak alat sama sekali tidak dapat merayapi fragmen hash—konten di /#/about tidak terlihat oleh perayap lama (Google menanganinya melalui perenderan tanpa kepala, sedangkan yang lain mungkin tidak). URL berbasis jalur dirayapi secara normal, sehingga jelas lebih baik untuk optimisasi mesin pencari.

Persepsi Pengguna

URL berbasis hash tampak "aneh"—pengguna melihat tanda # dan mungkin tidak memercayai tautan tersebut atau lupa menyalin URL lengkapnya. URL berbasis jalur tampak seperti URL web lainnya, sesuai dengan harapan pengguna. SPA modern hampir selalu memilih perutean berbasis jalur hanya karena alasan ini.

Kerumitan Implementasi

Berbasis hash: sekitar 10 baris JS (pendengar hashchange + penampilan). Berbasis jalur: panggilan pushState, pendengar popstate, pencegatan klik tautan, dan cadangan sisi server. Hash adalah pilihan seringan mungkin; jalur memerlukan lebih banyak infrastruktur untuk pengalaman pengguna yang lebih baik.

Pertimbangan Hosting Statis

Layanan hosting yang sepenuhnya statis (konfigurasi bawaan GitHub Pages) tidak dapat melakukan cadangan sisi server, sehingga perutean berbasis jalur rusak saat dimuat ulang. Solusinya antara lain trik pengalihan 404.html, menggunakan Netlify/Vercel (yang memahami cadangan SPA), atau menerima perutean berbasis hash untuk proyek yang hanya memakai hosting statis.

Pendekatan Hibrida

Beberapa aplikasi memadukan keduanya: berbasis jalur untuk route utama, dan berbasis hash untuk bagian dalam halaman (modal, penanda tab). Peristiwa hashchange tetap dipicu untuk bagian-bagian ini, melengkapi perute berbasis riwayat untuk status subhalaman tanpa memenuhi URL utama.

Migrasi antara Keduanya

Untuk bermigrasi dari hash ke jalur: tulis ulang semua tautan internal, tambahkan cadangan server, ganti logika hashchange dengan popstate, lalu arahkan URL hash lama ke padanan berbasis jalur menggunakan skrip inisialisasi kecil yang berjalan sekali dan memanggil history.replaceState.

Kriteria Keputusan

Pilih berbasis hash untuk: hosting statis tanpa penulisan ulang, alat admin internal yang tidak memerlukan optimisasi mesin pencari, serta komponen tersemat. Pilih berbasis jalur untuk: apa pun yang dihadapi pengguna, apa pun yang perlu diindeks mesin pencari, serta apa pun yang dibagikan di media sosial—yang mencakup sebagian besar aplikasi.

Pemeriksaan Pengetahuan

Mengapa perutean SPA berbasis jalur memerlukan konfigurasi server yang tidak diperlukan oleh perutean berbasis hash?

Ringkasan

Perutean berbasis hash (URL seperti /#/about) tidak memerlukan konfigurasi server, tetapi memiliki optimisasi mesin pencari yang lemah dan menggunakan URL yang kurang rapi. Perutean berbasis jalur (URL seperti /about) memerlukan cadangan server ke index.html, tetapi menghasilkan URL yang rapi, mudah ditemukan mesin pencari, dan mudah dibagikan. SPA modern yang ditujukan untuk publik menggunakan perutean berbasis jalur; proyek di hosting statis atau proyek internal mungkin tetap memilih hash demi kesederhanaan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Perutean Berbasis Hash vs Berbasis Jalur” gratis?

Ya — teks lengkap “Perutean Berbasis Hash vs Berbasis Jalur” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Perutean Berbasis Hash vs Berbasis Jalur”?

Bandingkan perutean hash dengan perutean riwayat berbasis pushState. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Perutean Berbasis Hash vs Berbasis Jalur” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. pushState dan replaceState
  2. Peristiwa popstate
  3. Perutean Berbasis Hash vs Berbasis Jalur
  4. Navigation API peramban modern
← Kembali ke HTML Academy