React, Vue, Angular gibi sistemlere SPA(Single Page Application) denir. Çalışma sistemini anladığınızda, neden SPA dendiğini daha rahat anlayabiliyorsunuz. Geliştirme süreçleri başlangıçta zor gibi gözükse de proje büyüdükçe daha verimli hale geliyor. Doğru şekilde konfigüre edilip, kullanıldığında büyük performans artışı sağlıyor. Faydası saymakla bitmiyor deneyimlemek gerekiyor. Çalışma mantığında sizin belirlediğiniz alanlar, belirlediğiniz kriterlere göre değişiklik gösteriyor. Normal bir HTML sayfada routing yaptığınızda sayfanın tamamı render edilirken, SPA çalışmalarında belirlediğiniz alanlar render edilebilir hale geliyor. Bunu daha detaylandırmak gerekirse:


Bir sayfanız var header, content ve footer alanınız var. Siz doğru konfigürasyonu yaptığınızda, sadece content alanının güncellenmesini sağlayabilirsiniz. Header ve Footer alanları bu sayede render edilmez.

Bunun dışında veri aldığınızda güncellemeniz gereken alanları çok rahat bir şekilde güncelleyebilirsiniz. Ürün sayfalarında sayfalama yaptığınızda, tek bir değişkeni değiştirerek sayfaya yeni verinin yüklenmesini sağlayabilirsiniz. Redux gibi bir state management ile API'a ekstra istekler göndermeden, verileri client tarafında sorunsuz şekilde tutabilirsiniz.

Son olarak Webpack gibi paketleme araçları ile JS, CSS, görsel dosyalarını birkaç kod ile konfigüre edip, tüm cihazlarda çalışmasını sağlayabilirsiniz.

Dipnot: API ile çalıştığınız için Back-end'de ne kullandığınız tamamen size kalmış.