Merhabalar. Bu yazıda sizlerle tek sayfa web uygulaması (Single Page Application) konseptini değerlendireceğim. Bu kavramın birebir çevirisi bence pek şık durmuyor. Ayrıca İngilizcedeki manayı da tam vermiyor. Çok sayfalı web sitelerinin/uygulamalarının tek sayfadan oluşan hali gibi anlaşılabiliyor. Halbuki teknik olarak arada dağlar kadar fark ama daha iyisi türetilene kadar bununla idare edeceğiz maalesef. Kavramı biraz açıkladığımda, çok sayfalı diye tabir ettiğimiz klasik uygulamalarla/sitelerle aralarındaki farklar daha iyi anlaşılacak inşallah. 

Tek sayfa web uygulamaları, takriben son 10 yıl içinde Angular, React, Vue gibi frontend Javascript kütüphanelerinin yaygınlaşması ile birlikte web yazılım dünyasını iyiden iyiye işgal etti. Tek sayfa web uygulamalarını anlamak için önce klasik çok sayfalı (multi-page) web sitelerini/web uygulamalarını biraz bilmek gerekiyor. Klasik web sitesi mantığında, istemci (client), sunucudan (server) ulaşmak istediği sayfayı talep eder, sunucu da bu sayfayı istemci ile paylaşır. Bu işlem her sayfa için tekrar tekrar gerçekleştirilir. Mesela bir siteye girdiğinizde önce ana sayfa sunucudan istenir, sonra kullanıcı diğer bir sayfaya geçtiğinde, mesela iletişim sayfası diyelim, istemci tekrar bu sayfayı sunucudan ister. Klasik web siteleri bu şekilde çalışmaktadır. Tek sayfa web uygulamaları ise bu şekilde çalışan, yani sunucuya sürekli git-gel operasyonu yapan modele tepki olarak doğmuş gibi duruyor. Çünkü bu şekilde gerçekleştirilen veri pakedi alıp verme işlemi çok verimli bir çalışma modeli olarak gözükmüyor. Bu basit çalışma prensibini anladıysak, tek sayfa web uygulamalarının çalışma modelini de şu şekilde özetleyelim. İstemci sunucuya sadece uygulama ilk açıldığı anda bir kere gider ve ne var ne yok bütün site içeriğini alır. Bunu olağan durum (default) için söylüyorum arkadaşlar, tabi ki bu durumu bozan performansa dönük veri aktarım işlemleri bulunuyor. Yazılımcı arkadaşlar hemen devreye girip bunları sıralamadan ben bir tane yazayım. Mesela tembel yükleme (lazy loading) dediğimiz durum buna bir örnek olarak verilebilir. Yani genel manda, tek sayfa web uygulamalarında, büyük bir javascript pakedi, sunucuda işlenmeden yani HTML haline dönüştürülmeden istemcinin tarayıcısına kapalı kutu olarak gönderilir. Çözümleme ya da HTML haline dönüştürme kısmı istemcinin yani kullanıcının tarayıcısında gerçekleştirilir. Tek sayfa web uygulaması ile çok sayfa web uygulaması/sitesi arasındaki en temel teknik farkı bu şekilde özetleyebilirim. 

İki uygulama tipi arasındaki farkı anladığımıza göre şimdi daha temel bir soruya cevap arayalım. Neden bu şekilde iki farklı uygulama dizaynı var ve bunların birbirlerine karşı olan avantajları ve dezavantajları neler? Tek sayfa web uygulamalarında sayfanın/uygulamanın tamamı başta bir seferde indirildiği için ilk açılış süresi çok sayfalı uygulamalara ya da sitelere göre biraz daha uzun oluyor. Ama bununla birlikte uygulama bir kere indiğinde artık jet hızında bir kullanıcı deneyimi karşımızda. Tek sayfa web uygulamaları ilk yüklemeden sonra genel anlamda sadece veri alışverişi için sunucu ile iletişim kurmaktadır. Eğer bir de verimli bir önbellek stratejisi belirlenmiş ise kullanıcı çok nadiren uygulamanın geç açılması problemine şahit olur. Buna karşın, çok sayfalı uygulamalarda, her sayfa için sunucuya git gel operasyonu olacağı için, kullanıcının totalde sayfalar arasında gezinme sırasında beklemeye harcadığı vakit daha fazla olmaktadır. Bu durumu daha pürüzsüz bir kullanıcı deneyimi başlığı altında tek sayfa web uygulamalarına bir artı olarak yazılabiliriz. Ama gelelim en sıkıntılı konuya. Hatta tek sayfa web uygulaması konseptini rafa kaldırmamıza sebep olacak kadar ciddi bir konu, “Arama Motoru Optimizasyonu”. Ya da daha ziyade bilinen adıyla SEO(Search Engine Optimization). Maalesef, tek sayfa web uygulamaları, SEO konusunda oldukça kötü durumda. Javascript kodunu çözümlemek, her ne kadar yapabildiklerini söyleseler de Google ve diğer arama motorları için oldukça maliyetli bir operasyon. Google salt Javascript’ten oluşan bu tip siteleri render ettiğini yani işlediğini söylese de, pratikte bunu klasik HTML sitelerini render edebildiği gibi yapabildiğini söylemek imkansız. Render edebildiği kısım oldukça minimal düzeyde ve render edebildiği kısım dahi çok uzun sürüyor, çünkü Javascript’e farklı ve daha kompleks bir render operasyonu uyguluyor. İki baba Javascript çatısı olan React ve Angular’ı kullanarak aylar süren bir analiz çalışması yaptım. Sonuç hüsran. Uygulamaların SEO’larını kurtarmak için çeşit çeşit yöntemler de denedim ama yine de istediğim sonucu alamadım. 

Peki durum SEO açısından bu kadar kötüyse neden bu tek sayfa web uygulama konsepti geliştirildi. Tek sayfa web uygulamaları, mobil uygulama ya da masaüstü uygulama deneyimini tarayıcılarda da sağlamak için geliştirildi. Bu uygulamaların en yaygın kullanımı kullanıcının bir hesap açıp belli operasyonları yönettiği yönetim panelleri ve ileri seviye destek uygulamalarıdır. E-mail uygulamaları, depolama yaptığınız bulut uygulamaları, çizim programları, envanter uygulamaları, müşteri ilişkileri yönetimi uygulamaları, çizelgeleme, proje yönetimi, görev takip, talep yönetimi ve benzeri birçok uygulama buna örnek olarak verilebilir. Bir kullanıcı hesabı arkasında kalan işlemleri gönül rahatlığı ile performansı yüksek bir şekilde tek sayfa web uygulamaları ile gerçekleştirebilirsiniz. Bu tip sayfa işleme teknolojisine “istemci tarafında işleme” (client-side rendering) deniyor. Bunun zıddı olana ise “sunucu tarafında işleme” (server-side rendering) deniyor. 

Bir meseleye daha değinelim. İstemci tarafında işleme yapan Javascript çatıları yazılım tatminini en tepeye çıkaran teknolojiler desek yanılmış olmayız. Angular, React ve Vue üçlüsü bu yüzden yazılımcılar arasında oldukça seviliyor. Tabi zamanla bu Javascript çatılarının kullanım alanlarının geliştirilmesi ve klasik çok sayfalı web dizaynına olanak tanıyan yapıda olması yazılımcılar tarafından ciddi anlamda talep edildi. Bu noktadaki açık, zaman içerisinde Vercel gibi web platformlarının hatırı sayılır firmaları tarafından dolduruldu. Yani, bu Javascript çatıları üzerine de kaçak çatılar çıkıldı. Mesela React’ın Next.js gibi ultra lüks bir Javascript çatısı bulunuyor. Öyle bir yazılım çatısı ki, içinde yok yok. SEO meselesi zaten çoktan halledilmiş, bunun haricinde React geliştirirken sorun olan uygulama içi rotalama, medya verileri optimizasyonu, verilerin ön işlemesinin yapılması, kod bölümleme, modüler yükleme ve bunun gibi irili ufaklı onlarca baş ağrısı olan konu ortadan kaldırılmış durunda. Benim bunu yeni gibi anlattığıma bakmayın, bu uzunca bir süredir böyle aslında. Google’ın arkasını topladığı Angular’da bu konuda React’dan aşağı kalır vaziyette değil. Merak edenler Angular Universal’i inceleyebilir. Aynı durum Vue için de geçerli. Orada da Nuxt.js denen ve Next.js’in kardeşi olan bir yazılım çatısı bulunuyor. Hasılı kelam, illa klasik web sitelerini de bu tip ileri teknolojiler yardımıyla geliştirecekseniz, evet bunu rahatlıkla yapabilirsiniz. Performansları nasıl? Kesinlikle bomba gibi. Eğer biraz kuralına uyarak hareket ederseniz, lighthouse skorları (yani Google performans skorları) hemen 90 puanları görüyor. Hızlı ve kullanıcı deneyimi yüksek bir uygulamanın ya da web sitesinin sahibi oluyorsunuz. Bu tip uygulamaları mobil uygulamaya döndürmek te oldukça kolay. Yani resmen ortada bir kuş katliamı var.

Toparlarsak, tek sayfa web uygulaması paradigması eğer işi bilen bir yazılım ekibinin elinde şekillenirse muazzam sonuç veriyor. Bu yazıyı okuduktan sonra, yazılım firmanızdan son teknolojiler ile donatılmış bir yazılım alırken artık yaş tahtaya basmazsınız. Yaş tahtaya basan firmalar gördüm arkadaşlar. Hem de sahibi yazılımdan biraz da anlayan adamlar. Katar’da koca bir firmanın halka açık(public) web sitesi son teknoloji olduğu için Angular ile yazılmış ama ortada SEO’dan eser yok. Site, aramalarda güç bela gözüküyor. Bu arkadaşlara nasıl sitelerini adam edebileceklerine dair rapor yazdık. Sizlerin de bu tip bir ihtiyacı olursa iletişime geçip destek alabilirsiniz. Kurtarılamayacak kod yoktur (hadi azdır diyelim), ama cankurtaran bir yazılımcınız varsa. Bir dahaki yazıya kadar sağlıcakla kalın.