SPA (Single Page Application): Sayfa Yenilemeden Çalışan Web Uygulamaları
SPA, sayfayı baştan yüklemeden JavaScript ile içeriği güncelleyen web uygulamasıdır. İşleyişi, avantajları, SEO sınırları ve kullanım alanlarını öğrenin.
SPA nedir?
Geleneksel web sitelerinde her bağlantı tıklamasında tarayıcı sunucudan yepyeni bir HTML sayfası ister ve ekran baştan çizilir. Tek sayfa uygulamada ise tarayıcı başlangıçta yalnızca bir HTML kabuğu ve uygulamanın JavaScript kodunu alır. Sonraki gezinmelerde sayfa yenilenmez; uygulama ekranın ilgili bölümünü kendisi değiştirir.
Bu yaklaşım masaüstü uygulaması akıcılığını web'e taşır. E-posta istemcileri, yönetim panelleri, harita uygulamaları ve çevrimiçi tasarım araçları tipik SPA örnekleridir. Burada "tek sayfa" ifadesi, web sitesinin gerçekten tek ekrandan oluştuğu anlamına gelmez; kullanıcı birçok ekran görür, ama tarayıcı açısından belge bir kez yüklenir.
Nasıl çalışır?
Akış genellikle şöyledir. Tarayıcı ilk istekte kabuk HTML'i ve JavaScript paketini indirir. JavaScript çalışır ve uygulamayı ekrana çizer. Kullanıcı bir bağlantıya tıkladığında istemci tarafı yönlendirici (router) devreye girer, adres çubuğunu tarayıcının History API'si ile günceller ve ilgili bileşeni gösterir; sunucuya sayfa isteği gitmez.
Veri ise ayrıca alınır. Uygulama, bir REST ya da benzeri bir API'ye istek atar, gelen JSON veriyi bileşenlere bağlar ve yalnızca değişen kısımları günceller. Yükleme göstergeleri, hata durumları ve boş durumlar uygulama içinde yönetilir. Bu yapıda sunucu esasen veri ve iş mantığı sağlar, arayüz ise tarayıcıda yaşar.
Küçük bir örnek
Örneğin bir müşteri destek paneli düşünelim. Kullanıcı bilet listesinden bir biletin üzerine tıklar. Bir SPA'da liste ekranda kalırken sağ tarafta bilet detayı açılır; yalnızca o biletin verisi API'den çekilir. Adres çubuğu o bilete özgü adresi gösterir, geri tuşuna basıldığında uygulama liste durumuna döner, sayfa yeniden yüklenmez.
Aynı akış geleneksel çok sayfalı bir sitede her adımda yeni bir sayfa yüklemesi gerektirir. Panel gibi yoğun etkileşimli ekranlarda SPA'nın akıcılık avantajı burada belirginleşir.
Avantajları ve sınırları
Avantajları: • Akıcı, uygulama hissi veren kullanıcı deneyimi. • Sunucuya giden yük hafifler; yalnızca veri taşınır. • Arayüz ve veri katmanı ayrıldığı için aynı API'yi mobil uygulamalar da kullanabilir.
Sınırları: • İlk yükleme, JavaScript paketi büyüdükçe yavaşlayabilir. • Arama motorlarının içeriği görmesi ek çaba ister; içerik yalnızca JavaScript çalışınca oluşuyorsa SEO riski doğar. • Geri tuşu, sayfa başlığı, odak yönetimi ve ekran okuyucu uyumu gibi tarayıcının sunduğu davranışlar uygulama tarafından yeniden kurulmalıdır. • Hata yönetimi ve yüklenme durumları geliştiricinin sorumluluğundadır.
SPA, çok sayfalı site ve SSR arasındaki fark
Çok sayfalı uygulamada (MPA) her sayfa sunucuda hazırlanır ve tarayıcıya tam HTML olarak gelir. SPA'da ise arayüz tarayıcıda oluşturulur. İçeriğin arama motorları için görünür olması önemliyse sunucu tarafı render (SSR) ya da önceden üretim (statik üretim) kullanılır: ilk HTML sunucuda hazırlanır, sonrasında tarayıcıda uygulama devralır.
Bu yüzden bugün kamuya açık içerik siteleri genellikle hibrit yaklaşımlar kullanır; oturum arkasındaki paneller ise saf SPA olarak kalabilir. Karar, içeriğin aranabilir olması gerekip gerekmediğine, ilk yükleme hızı hedefine ve ekibin deneyimine bağlıdır.
Hangi araçlarla geliştirilir?
SPA'lar genellikle bir arayüz çerçevesiyle yazılır. React, Angular ve Vue.js bunların en bilinenleridir. Her biri bileşen tabanlı çalışır, yönlendirme için kendi çözümünü veya ekosistem eklentisini sunar ve durum yönetimi için ayrı kütüphaneler ya da yerleşik mekanizmalar kullanır.
Geliştirme sırasında dikkat edilen konular şunlardır: rota bazlı kod bölme ile paket boyutunu küçültme, kimlik doğrulama ve yetki kontrolü için rota korumaları, API hata yönetimi, tarayıcı geri tuşu davranışı ve erişilebilirlik testleri.
Bu konuyu Mindset programlarında nerede çalışırsınız?
Modern Web Geliştirme Frontend (React) programı "Routing ve Sayfa Mimarisi" ve "Performans Optimizasyonu" modülleriyle React tabanlı SPA'ları ele alır. Angular ile Kurumsal Web Uygulamaları programı yönlendirme, yetkilendirme, durum yönetimi ve dağıtım başlıklarını; Vue.js 3 ve Composition API ile Uygulama Geliştirme programı reaktivite, yönlendirme ve performansı işler.
Bu programlar, kurumsal panel ve iç araç geliştiren ön uç ekipleri ile arka uç geliştiricileri arayüz tarafına taşımak isteyen ekipler için uygundur.
İlgili Mindset programı
Modern Web Geliştirme — Frontend (React)
Sık sorulan sorular
SPA SEO için kötü müdür?
Kendi başına kötü değildir ama içerik yalnızca JavaScript çalıştıktan sonra oluşuyorsa arama motorlarının içeriği görmesi zorlaşabilir. Sunucu tarafı render ya da statik üretim bu sorunu çözer. Oturum arkasındaki paneller zaten aranmak zorunda olmadığı için SEO kaygısı taşımaz.
SPA ile PWA aynı şey midir?
Hayır. SPA bir mimari yaklaşımdır: sayfa yenilemeden çalışan uygulama. PWA (aşamalı web uygulaması) ise web uygulamasına çevrimdışı çalışma, ana ekrana ekleme gibi özellikler kazandıran tekniklerin adıdır. Bir SPA, PWA olabilir ama zorunlu değildir.
SPA'da geri tuşu nasıl çalışır?
Yönlendirici, tarayıcının History API'sini kullanarak adres çubuğunu ve geçmiş kaydını günceller. Kullanıcı geri tuşuna bastığında yönlendirici adresi görür ve ilgili ekranı yeniden gösterir; sayfa sunucudan yüklenmez. Bu davranış yönlendirme kütüphanesi doğru kurulduğunda otomatik çalışır.
Her proje SPA olarak mı yazılmalı?
Hayır. İçerik odaklı, aranabilir olması gereken siteler için sunucu tarafı render veya statik üretim genellikle daha uygundur. SPA, yoğun etkileşimli, oturum gerektiren ve uygulama hissi isteyen arayüzlerde güçlüdür. Karar içeriğin niteliğine göre verilir.
İlgili rehberler
İlgili eğitimler
Kategori: Yazılım Geliştirme