SPA (Tek Sayfa Uygulaması) Nedir?

SPA ile MPA arasındaki fark

Geleneksel web sitesi bir MPA'dır: her bağlantı tıklamasında tarayıcı sunucudan yeni bir HTML belgesi ister, mevcut sayfayı kaldırır ve yenisini baştan yükler. SPA'da ise ilk yüklemeden sonra belge hiç değişmez. Uygulamanın yönlendiricisi (router) bağlantı tıklamalarını yakalar, gereken veriyi API'den alır, DOM'un ilgili kısmını günceller ve adres çubuğundaki URL'yi yeni ekrana göre değiştirir.

Kesintisiz deneyim; e-posta istemcileri, yönetim panelleri ve tasarım araçları gibi kullanıcının uzun süre içinde kaldığı uygulamalarda SPA'yı cazip kılar. Bedeli ise MDN'in de vurguladığı gibi SEO, durum yönetimi, gezinme ve performans ölçümü tarafında ortaya çıkan ek iştir.

İstemci tarafı yönlendirme nasıl çalışır?

// Bağlantı tıklamasını yakala, sayfayı yeniden yükleme
link.addEventListener("click", (e) => {
  e.preventDefault();
  history.pushState({}, "", "/urunler/ayakkabi");
  ekraniCiz("/urunler/ayakkabi");
});

// Geri/ileri düğmeleri
window.addEventListener("popstate", () => ekraniCiz(location.pathname));

Eski SPA'lar /#/urunler gibi fragment tabanlı adresler kullanırdı. Google'ın belgeleri bu yapıdaki URL'lerin Googlebot tarafından güvenilir biçimde çözümlenemediğini belirtir ve History API kullanılmasını önerir. Bağlantıların da href değeri gerçek bir adres olan <a> öğeleri olarak kalması gerekir; router tıklamayı yakalasa bile tarayıcılar ve botlar bağlantıyı görebilmelidir.

SEO açısından bilinen tuzaklar

• Boş ilk HTML: İçerik yalnızca istemci tarafında render ediliyorsa arama motoru onu ancak JavaScript'i çalıştırarak görür; JavaScript çalıştırmayan botlar hiç göremez.
• Her rotada 200: Sunucu her adres için aynı kabuğu döndürdüğünden olmayan sayfalar soft 404'e dönüşür. Google iki çözüm önerir: sunucunun 404 döndürdüğü bir adrese JavaScript ile yönlendirmek veya hata ekranına JavaScript ile noindex eklemek.
• Rota başına meta bilgiler: Her ekran kendi başlığını, açıklamasını ve canonical etiketini güncellemelidir; bunlar ideal olarak sunucudan gelen HTML'de zaten bulunmalıdır.

Daha ayrıntılı teşhis adımları JavaScript SEO maddesinde. SEO Analiz Aracı da ham HTML ile render edilmiş sayfa arasındaki içerik ve bağlantı farklarını raporlar.

Ölçüm ve erişilebilirlik ayrıntıları

MPA'da her gezinme yeni bir sayfa yüklemesi olduğu için analitik betiği sayfa görüntülemesini kendiliğinden sayar. SPA'da sayfa yüklenmediği için ekran değişimlerinin History API olaylarından yakalanması gerekir; web analitiği aracınızın bunu yaptığını doğrulamazsanız ziyaretçi tek sayfa görmüş gibi raporlanır. Performans metrikleri de benzer biçimde ağırlıklı olarak ilk yüklemeyi yansıtır.

Erişilebilirlik tarafında, MPA'da tarayıcının kendiliğinden yaptığı iki şeyi SPA'nın üstlenmesi gerekir: yeni ekrana geçildiğinde odağı mantıklı bir noktaya (örneğin sayfa başlığına) taşımak ve ekran okuyuculara içeriğin değiştiğini bildirmek. Aksi hâlde görme engelli bir kullanıcı tıkladığı bağlantının işe yarayıp yaramadığını anlayamaz. Bu, web erişilebilirliği denetimlerinde SPA'larda sık çıkan bir bulgudur.

Bugünün karma modeli

Next.js dokümantasyonu "katı SPA"yı tek bir HTML dosyasıyla sunulan, her rotası ve veri isteği tarayıcıda işlenen uygulama olarak tanımlar ve bu modelin etkileşim öncesi büyük miktarda JavaScript yükleme eğiliminde olduğunu belirtir. Next.js gibi framework'ler bunun yerine her rota için ayrı HTML üretir, ilk yüklemeyi sunucuda veya derleme anında yapar ve sonraki geçişleri SPA gibi istemci tarafında yürütür. Kullanıcı açısından SPA hissi korunurken arama motoru her URL'de dolu bir HTML bulur.