Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması
Hash yönlendirmesiyle pushState tabanlı geçmiş yönlendirmesini karşılaştırın
Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
SPA Adresleri İçin İki Strateji
SPA'ler, tarayıcının getirmeyeceği adreslere ihtiyaç duyar. İki yaklaşım vardır: karma tabanlı yaklaşım, tarayıcının sunucuya hiçbir zaman göndermediği parçayı (# işaretinden sonraki her şeyi) kullanır; yol tabanlı yaklaşım ise pathname'i ve Geçmiş API'si hilelerini kullanır.
Karma Tabanlı Yönlendirme
Adresler https://example.com/#/about şeklindedir. Sunucu yalnızca / yolunu görür ve her adres için aynı HTML'i sunar. İstemci JS'i hangi görünümün oluşturulacağına karar vermek için location.hash'i okur. Basittir ve sunucu yapılandırması gerektirmez.
hashchange Olayı
Karma tabanlı yönlendiriciler, location.hash her değiştiğinde tetiklenen hashchange olayını dinler. window.location.hash'i okumayla birlikte bu, istemci yönlendirmesi için gereken tek API'dir — Geçmiş API'si kullanılmaz.
window.addEventListener("hashchange", () => {
const route = location.hash.slice(1) || "/";
renderPage(route);
});Yol Tabanlı Yönlendirme
Adresler https://example.com/about şeklindedir — sunucu tarafından oluşturulan adreslerden ayırt edilemez. Geçmiş API'sinin pushState'i yolu yeniden yükleme olmadan değiştirir; geçmiş gezinme olayı geri ve ileri gezinmelerinde tetiklenir; tıklama yakalama da <a> tıklamasını SPA gezinmesine dönüştürür.
Sunucu Yapılandırması Gerekir
Yol tabanlı yönlendirmede sunucu, kullanıcının doğrudan girebileceği veya yenileyebileceği her yol için SPA'in index.html dosyasını döndürmelidir. Aksi halde /about yolunu yenilemek 404 hatası verir. Şunu yapılandırın: önce dosyayı deneyin, ardından index.html'e geri dönün (Nginx'te geçmiş geri dönüşü, Vite geliştirme ortamında vite-plugin-history-api).
# Nginx config
location / {
try_files $uri $uri/ /index.html;
}Arama Motoru Optimizasyonu ve Paylaşım
Arama motorları ve birçok araç karma parçalarını hiç tarayamaz — /#/about adresindeki içerik eski tarayıcılara görünmez (Google bunu başsız oluşturma ile işler, diğerleri işlemeyebilir). Yol tabanlı adresler normal şekilde taranır; bu da onları arama motoru optimizasyonu açısından kesinlikle daha iyi kılar.
Kullanıcı Algısı
Karma adresleri gözle görülür biçimde "tuhaf"tır — kullanıcılar # işaretini fark eder ve bağlantıya güvenmeyebilir veya adresin tamamını kopyalamayı unutabilir. Yol adresleri, kullanıcıların beklediği gibi diğer tüm web adreslerine benzer görünür. Modern SPA'ler yalnızca bu nedenle bile neredeyse her zaman yol tabanlı yönlendirmeyi seçer.
Uygulama Karmaşıklığı
Karma tabanlı yaklaşım: yaklaşık 10 satır JS (hashchange dinleyicisi ve oluşturma). Yol tabanlı yaklaşım: pushState çağrıları, geçmiş gezinme olayı dinleyicisi, bağlantı tıklaması yakalama ve sunucu tarafında geri dönüş. Karma en hafif seçenektir; yol yaklaşımı daha iyi bir kullanıcı deneyimi için daha fazla altyapı gerektirir.
Statik Barındırma Hususları
Salt statik barındırma hizmetleri (GitHub Pages'in varsayılan yapılandırması gibi) sunucu tarafında geri dönüş yapamaz; bu nedenle yol tabanlı yönlendirme yenileme sırasında bozulur. Çözüm olarak 404.html yönlendirme hilelerini kullanabilir, Netlify veya Vercel'de barındırabilir (bunlar SPA geri dönüşünü destekler) ya da yalnızca statik barındırılan projeler için karma tabanlı yaklaşımı kabul edebilirsiniz.
Karma Yaklaşımlar
Bazı uygulamalar ikisini birlikte kullanır: ana route için yol tabanlı yaklaşım, sayfa içindeki bölümler (modal pencereler ve sekme bağlantıları) için karma. Karma değişikliği olayı bu bölümler için yine tetiklenir ve ana adresi gereksiz kayıtlarla doldurmadan alt sayfa durumunu yönetmek üzere Geçmiş API'si tabanlı yönlendiriciyi tamamlar.
İki Yaklaşım Arasında Geçiş
Karmadan yola geçmek için tüm dahili bağlantıları yeniden yazın, sunucu geri dönüşü ekleyin, karma değişikliği mantığını geçmiş gezinme olayıyla değiştirin ve eski karma adreslerini, bir kez çalışan ve history.replaceState çağıran küçük bir başlangıç betiğiyle eşdeğer yol adreslerine yönlendirin.
Karar Ölçütleri
Şunlar için karma tabanlı yaklaşımı seçin: yeniden yazma desteği olmayan statik barındırma hizmetleri, arama motoru optimizasyonunun önemli olmadığı dahili yönetim araçları ve gömülü araçlar. Şunlar için yol tabanlı yaklaşımı seçin: kullanıcıya açık her şey, arama motorlarında dizine eklenmesi gereken her şey ve sosyal medyada paylaşılacak her şey — yani uygulamaların çoğu.
Bilgi Kontrolü
Yol tabanlı SPA yönlendirmesi, karma tabanlı yönlendirmenin gerektirmediği sunucu yapılandırmasını neden gerektirir?
Özet
Karma tabanlı yönlendirme (/#/about gibi adresler) sunucu yapılandırması gerektirmez, ancak arama motoru optimizasyonu açısından zayıftır ve çirkin adresler kullanır. Yol tabanlı yönlendirme (/about gibi adresler) index.html'e sunucu geri dönüşü gerektirir, ancak temiz, arama motoru optimizasyonu dostu ve paylaşılabilir adresler üretir. Modern, herkese açık SPA'ler yol tabanlı yaklaşımı kullanır; statik barındırılan veya dahili projeler basitlik için hâlâ karma tabanlı yaklaşımı seçebilir.
Sıkça Sorulan Sorular
“Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması” dersi ücretsiz mi?
Evet — “Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması” dersinde ne öğreneceğim?
Hash yönlendirmesiyle pushState tabanlı geçmiş yönlendirmesini karşılaştırın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- pushState ve replaceState
- popstate Olayı
- Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması
- Navigation API: Modern Tarayıcılar