
Web dünyasında gezinirken, bazen bir sayfadan diğerine geçiş yapmak zaman alıcı olabilir, işte tam da bu noktada Single Page Application (SPA) devreye girer. SPA, kullanıcıların sadece tek bir sayfa üzerinden tüm içeriğe erişebildiği, web deneyimini daha hızlı, akıcı ve etkileşimli hale getiren modern bir yaklaşım sunar.
Şimdi SPA’nın çalışma mantığını adım adım inceleyelim:
- İlk Yükleme (Initial Load): Kullanıcı ilk kez SPA'ya girdiğinde tarayıcıya SPA'nın temel bileşenleri olan HTML, CSS ve JavaScript dosyaları indirilir. Bu dosyalar, temel yapının tarayıcıya yüklenmesini sağlar.
- İstemci Tarafı Yönlendirme (Client-Side Routing): SPA, kullanıcının URL'sini izler ve tarayıcıda hangi içeriğin gösterileceğini belirler. URL değiştiğinde sayfa yeniden yüklenmez, sadece ilgili içerik alınarak görüntülenir.
- API İstekleri ve Veri Alımı: Kullanıcı etkileşimleri sonucunda SPA, sunucudan gerekli verileri almak için API istekleri yapar. Bu istekler, genellikle AJAX veya Fetch gibi teknolojilerle gerçekleşir.
- Veri İşleme ve Gösterme: Sunucudan gelen veriler genellikle JSON formatında gelir. Bu veriler, SPA'nın içindeki bileşenler tarafından işlenerek kullanıcıya gösterilmek üzere sayfa içeriği oluşturulur.
- Bileşenlerle Yapılandırma (Component-Based Structure): SPA'lar, farklı bileşenlerin bir araya gelmesiyle oluşur. Bileşenler, sayfanın farklı parçalarını (header, sidebar, içerik kutuları vb.) temsil eder.
- Sayfa Yeniden Yüklenmeden İçerik Güncellemesi: SPA'lar, kullanıcı farklı bir bağlantıya tıkladığında sayfayı tamamen yeniden yüklemez. Sadece gerekli olan veriler alınır ve içerik dinamik olarak güncellenir. Bu da kullanıcıların daha hızlı bir şekilde gezinmesini ve daha akıcı bir deneyim yaşamasını sağlar.

SPA’nın genelde avantajlarının üzerinde durduk, peki dezavantajları nelerdir? Biraz da bunu inceleyelim:
- SEO Zorlukları: Arama motorları için sayfa içeriğini indeksleme konusunda zorluklar yaşayabilirler. Bazı SPA'larda, başlangıçta sunucu tarafında oluşturulmayan içerikler arama motorları tarafından eksik indekslenebilir.
- Bellek Yönetimi: Uygulama sürekli olarak çalıştığından bellek sızıntıları veya performans sorunları olabilir. Sayfa içeriği büyüdükçe tarayıcıda kullanılan bellek miktarı da artabilir.
- İlk Yükleme Süresi: İlk yüklemede tüm kaynak dosyalarını indirmek ve yüklemek gerekebilir. Bu da başlangıçta uzun bir bekleme süresine neden olabilir.
- Geri Düğmesi Sorunları: Tarayıcıdaki geri düğmesi geçmiş sayfalar arasında doğru navigasyonu sağlamakta bazen zorluk yaşayabilir.
- Güvenlik: SPA'lar, RESTful API'ler üzerinden veri alışverişi yaparken güvenlik duvarlarını ve kimlik doğrulamayı yönetmek için özel bir dikkat gerektirebilirler. Veri güvenliği konusunda daha fazla sorumluluk yükleyebilirler.
- Cihaz Uyumluluğu: Bazı eski tarayıcılar veya cihazlar SPA'ların gerekli özelliklerini desteklemeyebilir. Bu da uyumluluk sorunlarına yol açabilir.
Bu dezavantajlar, SPA'ların genel avantajlarına rağmen, özellikle belirli senaryolar veya uygulama gereksinimleri için düşünülmesi gereken faktörlerdir.
Örnek bir uygulama üzerinden SPA mantığını daha iyi kavramaya çalışalım.
Bir restoran rezervasyon uygulaması senaryosunu ele alalım:
ArchiNom Restoran Rezervasyon Uygulaması Senaryosu:
Kullanıcı, ArchiNom adlı restoran rezervasyon uygulamasını kullanarak akşam yemeği için bir masa ayırtmak istiyor.
Geleneksel Web Sitesi Senaryosu:
Kullanıcı, ArchiNom web sitesine giriş yapar ve "Rezervasyon" bölümüne tıklar. Yeni bir sayfa açılır ve tüm rezervasyon seçenekleri yüklenir. Kullanıcı, istediği tarih ve saat için uygun bir masa bulmak için birkaç sayfayı gezinmek zorunda kalır. Her seferinde yeni sayfalar yüklenir ve bu süreç biraz zaman alır.
SPA Senaryosu:
Kullanıcı, ArchiNom'un SPA versiyonunu ziyaret eder. Ana sayfa yüklenir ve tüm rezervasyon seçenekleri bir kez indirilir. Kullanıcı, istediği tarih ve saat için uygun bir masa aramak için filtreleri kullanır. Sayfa yeniden yüklenmez, sadece seçilen filtrelerle uyumlu masalar anında listelenir. Kullanıcı, farklı saatleri ve seçenekleri kolayca görebilir, sayfa yenileme gerektirmez. Sonunda uygun bir masa bulduğunda, rezervasyonu tamamlamak için gerekli adımları takip eder ve rezervasyon işlemi hızlıca tamamlanır.
Bu şekilde, SPA kullanılan senaryoda kullanıcı daha hızlı ve sorunsuz bir deneyim yaşar, çünkü sayfa her seferinde yeniden yüklenmez, sadece gerekli veriler alınarak içerik güncellenir.
Hadi birlikte Blazor kullanarak basit bir SPA uygulaması yapalım:
Öncelikle rezervasyon ile ilgili ihtiyacımız olan veriler için bir model dosyası oluşturalım.
ReservationModel.cs:
Daha sonra servis dosyamızı oluşturalım. Burası rezervasyon işlemleri için gerekli iş mantığını ve işlemlerini yönetebildiğimiz bir hizmet sınıfını temsil eder. Bu dosya, rezervasyon oluşturma, güncelleme, silme gibi işlemleri içeren metotları içerir. Ayrıca, veritabanı işlemleri veya harici servislerle iletişim kurma gibi rezervasyon süreçlerinde gereken diğer operasyonlar da burada yönetilebilir.
ReservationService.cs:
Artık sayfalarımızı oluşturmaya başlayabiliriz. 3 tane sayfamız olsun.
1. Anasayfa
2. Rezervasyon
3. letişim
Öncelikle açılış sayfamızı oluşturalım. Bu sayfada uygulama ile ilgili genel bilgiler, görseller vs. paylaşılabilir.
Index.razor:
ReservationForm.razor dosyası rezervasyon formunu oluşturur ve kullanıcıdan girişleri alır. HandleValidSubmit metodu, form doğrulandığında çağrılır ve rezervasyon işlemi gerçekleştirilir. Sonuç kullanıcıya bildirilir.
ReservationForm.razor:
Restoran ile ilgili iletişim bilgilerinin olduğu bir sayfa oluşturalım.
Contact.razor:
Son olarak oluşturduğumuz bu sayfaları bir NavBar üzerinden çağıralım.
NavMenu.razor dosyası, Single Page Application (Tek Sayfa Uygulaması) mimarisini destekleyen Blazor uygulamasının navigasyonunu yöneten bir bileşeni temsil eder. SPA, kullanıcıların uygulama içindeki sayfalar arasında geçiş yaparken tek bir HTML sayfası üzerinde çalışır. Bu dosya, kullanıcı arayüzünde gezinme, menü ve sayfa yönlendirmelerini içeren bileşenleri barındırarak uygulamanın SPA özelliklerini destekler.
NavMenu.razor:
Linklere tıklandığında veya form gönderildiğinde, ilgili içerikler veya rezervasyon sonuçları ana içerik bölümüne yüklenerek SPA tarzında bir rezervasyon uygulaması deneyimi sunmuş oluyor.
SPA uygulamalarının esnekliği ve performans avantajları, modern web geliştirme süreçlerinde önemli bir yer tutmaktadır. Bu yazıda, SPA uygulamalarının çalışma mantığını, getirdiği avantajları ve dezavantajları detaylıca inceledik. Ayrıca, basit bir restoran rezervasyon uygulamasıyla bu kavramları pratiğe döktük. Tek sayfa uygulamalarının kullanım alanlarını ve potansiyelini gösterirken gelecekteki web uygulamalarının inşasında SPA’nın rolünün giderek artacağını öngörebiliriz. Teknolojinin bu değişimiyle birlikte, kullanıcı deneyimini ve performansı en üst düzeye çıkarmak artık daha erişilebilir hale gelmektedir. Yeni teknolojik olanaklarla gelecekteki geliştirme süreçlerinde, SPA tabanlı uygulamaların önemi büyümeye devam edecektir.
KAYNAKÇA
[1] - https://learningdaily.dev/blazor-web-development-building-single-page-applications-99d7fbf66c04
[2] - https://www.bloomreach.com/en/blog/2018/what-is-a-single-page-application
[3] - https://andrewly.medium.com/pros-and-cons-between-single-page-and-multi-page-apps-8f4b26acd9c9
[5] - https:// www.konstantinfo.com/blog/single-page-app-vs-multi-page-app/