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.
İlgili Terimler
HTMX, HTML öznitelikleriyle AJAX, WebSocket ve sunucu tarafı parçalı güncellemeleri yazmayı sağlayan hafif kütüphanedir.
PWAPWA, web sitesini service worker, manifest ve duyarlı tasarımla kurulabilir, çevrimdışı çalışabilir uygulama deneyimine yaklaştıran yaklaşımdır.
ReactReact, kullanıcı arayüzlerini yeniden kullanılabilir bileşenlere ayırarak durum değişimlerini ekrana verimli yansıtan açık kaynak JavaScript kütüphanesidir.
View Transition APIView Transition API, sayfa veya durum değişimlerinde eski ve yeni görünüm arasında tarayıcı destekli animasyon sağlar.