• Client-Side Routing (İstemci Taraflı Yönlendirme): Geleneksel web uygulamalarında sunucu, URL'ye göre doğru HTML sayfasını gönderirken, SPA'larda yönlendirme işlemi tarayıcıda, JavaScript tarafından yapılır. Bu, uygulamanın URL'sini değiştirmesine (örneğin `/about` veya `/dashboard`) olanak tanır ancak sunucuya yeni bir tam sayfa isteği göndermez. React Router, Vue Router, Angular Router gibi kütüphaneler bu işlevi yerine getirir.
• API İletişimi: SPA'lar, verilerini sunucudan almak ve sunucuya göndermek için genellikle HTTP tabanlı API'lerle etkileşime girer. Bu API'ler genellikle RESTful veya GraphQL prensiplerine uygun olarak tasarlanır ve JSON formatında veri alışverişi yaparlar. JavaScript'in `fetch` API'si veya `axios` gibi kütüphaneler bu iletişimi kolaylaştırır.
• Durum Yönetimi (State Management): Bir SPA büyüdükçe, uygulamanın farklı bileşenleri arasında veri paylaşımı ve güncellenmesi karmaşık hale gelebilir. Durum yönetimi, uygulamanın verilerinin merkezi bir yerde saklanmasını ve tutarlı bir şekilde güncellenmesini sağlar. Redux, Vuex, MobX gibi kütüphaneler veya React Context API gibi yerleşik çözümler bu konuda geliştiricilere yardımcı olur.
• Bileşen Tabanlı Yaklaşım: Modern SPA çerçevelerinin çoğu (React, Angular, Vue), uygulamanın kullanıcı arayüzünü (UI) küçük, bağımsız ve yeniden kullanılabilir bileşenlere ayırma felsefesini benimser. Her bileşen kendi iç durumuna ve yaşam döngüsüne sahip olabilir. Bu modüler yaklaşım, kodun daha düzenli, bakımı kolay ve geliştirme sürecinin daha hızlı olmasını sağlar.
• Derleme Süreci (Build Process): Geliştirme aşamasında yazılan JavaScript, CSS ve diğer kaynak dosyaları, tarayıcı tarafından doğrudan kullanılabilir formatta olmayabilir (örneğin, TypeScript, Sass veya modern JavaScript özelliklerini kullanıyor olabilir). Webpack, Parcel, Vite gibi derleme araçları (bundlers), bu dosyaları bir araya getirir, optimize eder (küçültme, sıkıştırma) ve tarayıcıda çalışabilecek tek veya birkaç ana JavaScript dosyası ve CSS dosyası haline getirir.

• Gelişmiş Kullanıcı Deneyimi: Sayfa yenileme olmaması sayesinde, uygulamalar daha hızlı ve daha duyarlı hisseder. Kullanıcılar masaüstü uygulamalarına benzer kesintisiz bir deneyim yaşarlar.
• Hız: İlk yüklemeden sonra, sunucu ile sadece veri alışverişi yapılır. Bu, daha az bant genişliği tüketimi ve daha hızlı yükleme süreleri anlamına gelir.
• Geliştirme Verimliliği: Frontend ve Backend'in ayrılması, ekiplerin paralel çalışmasını kolaylaştırır. Frontend geliştiricileri arayüze odaklanırken, Backend geliştiricileri API'leri oluşturabilir. API tabanlı yaklaşım, aynı backend'in mobil uygulamalar gibi farklı istemciler tarafından da kullanılabilmesini sağlar.
• Önbellekleme: Uygulama kaynaklarının çoğu ilk yüklemede indirildiğinden, tarayıcı bunları önbelleğe alabilir. Bu, sonraki ziyaretlerde uygulamanın daha da hızlı açılmasını sağlar.
• Kolay Hata Ayıklama: Modern tarayıcılar (Chrome DevTools gibi) güçlü JavaScript hata ayıklama araçları sunar. SPA'ların client-side yoğun yapısı, geliştiricilerin sorunları daha kolay tespit etmesine ve çözmesine olanak tanır.

• SEO (Arama Motoru Optimizasyonu) Sorunları: Arama motoru botları, HTML içeriğini okuyarak siteleri dizine ekler. SPA'lar ilk yüklemede çoğunlukla boş bir HTML sayfası ve daha sonra JavaScript ile doldurulan içerik sunduğu için, botlar bazen bu içeriği tam olarak indeksleyemeyebilir. Sunucu tarafı render (SSR) veya ön-render (Prerendering) gibi teknikler bu sorunu çözmek için kullanılabilir ancak ek karmaşıklık getirir.
• İlk Yükleme Süresi: Uygulamanın tüm JavaScript ve CSS dosyaları ilk yüklemede indirildiği için, bu süreç geleneksel uygulamalara göre daha uzun sürebilir. Büyük boyutlu uygulamalarda bu durum, özellikle düşük bant genişliğine sahip bağlantılarda kötü bir ilk izlenim yaratabilir. Kod ayırma (code splitting) gibi optimizasyonlar bu süreyi kısaltmaya yardımcı olur.
• Bellek Sızıntıları ve Tarayıcı Kaynak Tüketimi: Uzun süreli kullanımlarda, kötü yazılmış JavaScript kodları veya hatalı bileşen yaşam döngüsü yönetimi, bellek sızıntılarına ve tarayıcı kaynaklarının aşırı tüketilmesine neden olabilir, bu da uygulamanın performansını düşürür.
• Geliştirme Karmaşıklığı: Özellikle büyük ve karmaşık SPA'lar için durum yönetimi, client-side routing, performans optimizasyonları ve güvenlik önlemleri gibi konularda uzmanlık gerektirir. Geliştirme süreci, geleneksel uygulamalara göre daha dik bir öğrenme eğrisine sahip olabilir.
• Güvenlik: Client-side tabanlı uygulamalarda, hassas bilgilerin istemcide saklanmaması veya işlenmemesi önemlidir. XSS (Cross-Site Scripting) ve CSRF (Cross-Site Request Forgery) gibi güvenlik açıklarına karşı özel önlemler alınmalıdır.

• React: Facebook tarafından geliştirilen ve bileşen tabanlı yaklaşıma sahip bir JavaScript kütüphanesidir. Özellikle büyük ve karmaşık UI'lar geliştirmek için idealdir. Geniş bir ekosisteme ve topluluğa sahiptir.
• Angular: Google tarafından geliştirilen tam teşekküllü bir JavaScript çerçevesidir. Büyük ölçekli kurumsal uygulamalar için daha uygundur ve güçlü bir CLI (Komut Satırı Arayüzü) ile gelir. TypeScript kullanımı standarttır.
• Vue.js: Daha hafif ve öğrenmesi daha kolay bir çerçeve olarak bilinir. React ve Angular'ın en iyi özelliklerini bir araya getirmeyi hedefler. Küçükten büyüğe her ölçekteki projede kullanılabilir.

JavaScript

// routes.js
const routes = {
    '/': 'Ana Sayfa İçeriği',
    '/hakkimizda': 'Hakkımızda Sayfası İçeriği',
    '/iletisim': 'İletişim Sayfası İçeriği'
};

function navigateTo(path) {
    history.pushState(null, null, path);
    renderContent(path);
}

function renderContent(path) {
    const appDiv = document.getElementById('app');
    if (appDiv) {
        appDiv.innerHTML = routes[path] || '404 - Sayfa Bulunamadı';
    }
}

// Sayfa yüklendiğinde ve URL değiştiğinde içeriği render et
window.addEventListener('popstate', () => {
    renderContent(location.pathname);
});

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('a.nav-link').forEach(link => {
        link.addEventListener('click', (event) => {
            event.preventDefault();
            const path = link.getAttribute('href');
            navigateTo(path);
        });
    });
    renderContent(location.pathname);
});

Uzman Görüşü' Alıntı:

"Tek Sayfa Uygulamaları, modern webin geleceğidir. Kullanıcı beklentilerini karşılamak ve hızlı, etkileşimli deneyimler sunmak için SPA mimarisi, geliştiricilere güçlü araçlar sunar. Ancak, bu gücü doğru kullanmak, performans ve SEO gibi kritik alanlarda dikkatli planlama ve uygulama gerektirir."

Genişletmek için tıkla ...

• MDN Web Docs - Single-Page Application (SPA)
• Wikipedia - Tek Sayfalı Uygulama
• React Resmi Web Sitesi
• Angular Resmi Web Sitesi
• Vue.js Resmi Web Sitesi