SPA Nedir?

İngilizce: SPA (Single Page Application)

SPA, ilk HTML yüklemesinden sonra rota değişimlerini JavaScript ile yapan ve API'den veri alarak sayfayı yenilemeden arayüzü güncelleyen web uygulamasıdır.

SPA Nedir?

SPA (Single Page Application), tarayıcının ilk açılışta temel HTML, CSS ve JavaScript paketini aldığı; sonraki ekran geçişlerini tam sayfa yenilemeden yaptığı web uygulaması mimarisidir. Kullanıcı farklı bölümlere giderken genellikle istemci tarafı router çalışır ve veri API çağrılarıyla güncellenir.

Bu model masaüstü uygulamasına benzer akıcı bir deneyim sağlayabilir. Ancak ilk yükleme boyutu, SEO, erişilebilirlik, hata durumları ve tarayıcı geçmişi yönetimi doğru ele alınmazsa kullanıcı deneyimi zayıflar.

Nasıl Çalışır?

  • Client-side routing: URL değişir, ancak tarayıcı tüm sayfayı yeniden yüklemez.
  • API veri akışı: Arayüz JSON veya benzeri formatta veri çeker.
  • State yönetimi: Kullanıcı oturumu, form durumu ve ekran verisi istemcide tutulabilir.
  • Bundle: JavaScript paketleri performans için bölünebilir ve tembel yüklenebilir.
  • Fallback: Derin link ve yenileme istekleri sunucu tarafında doğru karşılanmalıdır.

İş Dünyasında Kullanımı

SPA mimarisi yönetim panelleri, SaaS arayüzleri, proje yönetimi araçları, harita tabanlı ekranlar ve yoğun etkileşimli ürünlerde uygundur. Kullanıcı bir listeyi filtrelerken, modal açarken veya grafik güncellerken sayfanın tamamen yenilenmemesi verimli bir çalışma hissi verir.

İçerik ağırlıklı pazarlama sitelerinde veya SEO’nun ana başarı metriği olduğu sayfalarda server-side rendering veya static generation daha doğru olabilir. React ile SPA geliştirilebilir; offline ve installable deneyim gerektiğinde PWA özellikleri ayrıca eklenir.