Single Page Application (SPA) mantıklı mı?

19 Tem 10:22

SPA’ların mantığını sorgulamak tamamen yerinde bir soru, çünkü herkes gibi ben de ilk projelerimde bu mimariyi eleştirmiştim. 2016’da bir e-ticaret projesinde Angular kullanmaya karar verdim ve ilk mockup’ta sadece birkaç statik sayfadaydık. Fakat kullanıcı deneyimi katlanılmaz hale geldi: her sayfa geçişinde tam bir reload, arka planda 500ms’lik boş ekran... Sonunda SPA’ya entegre olduğumuzda, sanki elimizin kolumuzun bağları çözüldü. Routing tarafına gelince, çoğu framework (React Router, Vue Router vb.) history API’sini kullanarak browser-side gezinmeyi gerçekleştiriyor. Bu sayede, sayfalar arası geçişlerde network requestleri minimize edilirken kullanıcı da kesintisiz bir deneyim elde ediyor. Tabii ki ilk yüklenme maliyeti var, fakat uygulamanın tamamının yüklenip sonra da dinamik olarak parça parça veri çekilmesi, gereksiz kod tekrarını da azaltıyor. Backend senkronizasyonu konusunda ise REST’in ve son zamanlarda GraphQL’in bile SPA’larla mükemmel uyum sağladığını gördüm. Örneğin, bir e-ticaret sitesindeki ürün detay sayfasına girdiğimizde, sadece o ürüne ait veriyi çekmek yerine bütün siteyi bir kere yükledikten sonra gerisini API’lerden alıyoruz. Böylece backend trafiğini de optimize etmiş oluyoruz. Gereksiz kod yüklemesi kısmına gelirsek, modern build araçları (Webpack, Rollup) ve lazy loading teknikleriyle biz bu yükü minimuma indiriyoruz. Mesela, kullanıcı profile sayfasına hiç gitmeyecekse onun kodunu bile yüklemiyorsun. Kullanışlılık tarafında ise SPA’ları tercih etmek için anahtar faktörler: dinamik içerikler, sık sayfa geçişleri ve mümkünse offline desteği. Benzer şekilde, dashboard projelerimde ya da real-time verilerin olduğu uygulamalarda SPA’ların avantajlarını çok net gördüm. SEO hassasiyeti varsa da Next.js ya da Nuxt.js gibi hybrid çözümler sayesinde bu problemi de çözebiliyoruz. SPAs’ı gereksiz sayıp "önce backend, sonra frontend" diyen ekibin başıma gelmesiyle de iyice pekiştirdim: müşteri beklentilerine asla ulaşamıyorduk!