Web tabanlı projeleri yayınlamada React, VueJS, Angular gibi javascript frameworklerin kullanılmaya başlamasıyla Server-Side Rendering (SSR), Client-Side Rendering (CSR) gibi kavramlarla tanıştık. Özellikle Google gibi arama motoru botların javascript ile ilişkisinin değişmesi bu kavramların ön plana çıkmasına neden oldu. Bu yazımızda Server-Side Rendering nedir, nasıl çalışır gibi merak edilen tüm başlıklara değineceğiz.
Server-Side Rendering (SSR) Nedir?
Server-Side Rendering (SSR), tarayıcıdan sunucuya gönderilen web isteği yanıtının sunucuda işlenmesini sağlayan metottur. Kullanıcı tarayıcıda web isteğinin yanıtını nasıl görüyorsa, bu metot sayesinde isteğin yanıtı sunucuda işlenir ve arama motoru botları siteyi sunucu üzerinde daha hızlı okur. SEO açısından avantaj olan bu özellik ile arama motoru sonuçlarında daha hızlı indexlenmesine olanak bulur. Server-Side Rendering metotu en çok tek sayfalık uygulamalarda kullanılan bir metottur.
Tek Sayfalık Uygulamalara (Single Page Application) Genel Bakış
Tek Sayfalık Uygulama, kullanıcıların ziyaret ettikleri sayfaları dinamik güncelleştiren web tabamlı uygulamalardır. Kullanıcı ilk başta web sayfasını sunucudan ister, sayfada aşağıya indikçe diğer kısımlar sunucudan gelir. İngilizce dilinde Single Page Application olarak ifade edilir ve SPA kısaltması kullanılır. Twitter, Facebook gibi web uygulamaları bu şekilde sitelerini kullanıcılarına sunarlar.
Tek Sayfalık Uygulamanın avantajlarını şu şekilde sıralayabiliriz:
- Sunucu yükünü azaltır.
- Kullanıcı deneyimini iyileştirir.
- SEO açısından performans sağlar.
- Tarayıcı dostudur.
- Geliştirme süreci basit ve hızlıdır.
Tek Sayfalık Uygulama javascript frameworkleri kullanır. Bu frameworkler başlıca şu şekildedir:
Javascript Nedir, Nasıl Çalışır?
Web sitesinde etkileşimin olmasını sağlayan metin tabanlı programlama dilidir. Kullanıcının web sitesinde form doldurmasına, veri girmesine ve bunun gibi web sitesi üzerinden etkileşime girmesini sağlar. 1995 yılından beri kullanılan javascript, 50 milyondan fazla sitede tercih edilen bir frameworktür.
Javascript kodları, ya sayfanın kodları içerisinde gömülü olarak gelir ya da ayrıca bir .js uzantılı dosyada bulunur. İstemci tarafında çalışan bir dildir. Javascript kodları bir sayfadaki dinamik değişen işlevlerin çalışmasını sağlar. Örneğin bir butona tıklayınca sayfada bir değişimin sağlanması gibi. Javascript hakkında detaylı bilgi almak için “JavaScript Nedir? Yeni Başlayanlar İçin Temelden İleriye Aksiyonel JS Rehberi” başlıklı blog yazımızı okuyabilirsiniz.
Server-Side Rendering (SSR) Nasıl Çalışır?
Server-Side Rendering (SSR) aşağıdaki adımları takip ederek çalışır.
- Kullanıcı internet tarayıcısından sayfayı çağırır.
- Sunucu çağrılan sayfaya ait HTML ve JS dosyaları işler ve kullanıcıya gönderir.
- Kullanıcının internet tarayıcısı HTML ve JS dosyaları indirir.
- Kullanıcı HTML’i görüntüler.
- Javascript dosyaları sunucuda uygulanabilir hale geldikten sonra internet tarayıcısı sayfayı göstermeye başlar.
- Kullanıcı tamamen sayfayı görüntüler.
Client-Side Rendering Nasıl Çalışır?
Client-Side Rendering web sayfaları kullanıcı tarafında en son uçta işleyen metottur. Bu metot javascript kodlarının kullanılmaya başlandığından günümüze tercih edilen yöntemdir.
Client-Side Rendering (CSR) aşağıdaki adımları takip ederek çalışır:
- Kullanıcı internet tarayıcısından sayfayı çağırır.
- Sunucu çağrılan sayfaya ait HTML ve JS dosyaları işler ve kullanıcıya gönderir.
- Kullanıcının internet tarayıcısı HTML ve JS dosyaları indirir.
- Kullanıcı internet tarayıcısı tarafından javascript uygulanmış HTML’i görüntüler.
Server-Side Rendering vs. Client-Side Rendering Arasındaki Farklar
Server-Side Rendering ile Client-Side Rendering arasındaki en belirgin fark javascript dosyalarının nerede uygulandığıdır. Buna bağlı olarak performans farklılığı olacaktır. Server-Side Rendering vs. Client-Side Rendering Arasındaki farklar şu şekildedir:
- SSR yönteminde JS dosyaları sunucuda uygulanır, CSR yönetimde ise kullanıcı tarafından uygulanır.
- SSR yönteminde site açılışındaki ilk isteği görme süresini belirten FCP süresi CSR yöntemine göre daha düşüktür.
- SSR yönteminde CSR yöntemine göre sunucu yükü daha fazladır.
- SEO açısından SSR yönetimi daha avantajlıdır.
- SSR yöntemini tercih etmek için geleneksel javascript kütüphelerinin dışında yeni nesil kütüphanelere ihtiyaç duyar, bu da özel ekip ihtiyacını ve fazladan maliyetini oluşturmaktadır.
Server-Side Rendering vs. Server-Side Generation Arasındaki Farklar
Server-Side Rendering ile Server-Side Generation arasındaki farklar arasındaki en belirgini javascript kodlarının uygulandığı alandır. Server-Side Rendering, javascript kodlarının sunucu tarafında uygulanması olarak belirtmiştik. Server-Side Generation ise hem sunucu tarafında hem de kullanıcı tarafında javascript kodların uygulanmasını sağlayan bir yöntemdir. Buna bağlı olarak;
- İlk yüklenme SSG yönteminde daha hızlıdır.
- Sayfadaki değişiklikleri SSG daha hızlı algılar.
- SSG yönteminin yapısı daha karmaşıktır, bakımı zordur.
Server-Side Rendering (SSR) İşleme Süreci Adımları
- HTTP isteği: Kullanıcı internet tarayıcısına bir URL yazar, tarayıcı sunucuya HTTP isteği gönderir.
- Veri toplama: Sunucu veritabanından, dosyalardan ve varsa harici kaynaklardan verileri toplar.
- Veri işleme: Sunucu topladığı veriler ile birlikte javascript kodların uygulandığı statik bir HTML dosyası oluşturur.
- HTTP cevabı: Sunucu oluşturduğu statik HTML dosyayı tarayıcıya gönderir.
- Sayfa açılışı: Tarayıcı HTML dosyayı indirip kullanıcıya gösterir.
- JS dosyaları indirme: Tarayıcı sayfada oluşabilecek değişiklikleri kullanıcıya göstermek için JS dosyaları indirir.
Dynamic Rendering Nedir? SSR ile Farkları Nelerdir?
Dynamic Rendering, javascript içeren sitelerde tanınmayan js dosyalarını user-agent botlarına tanıtmaya yarayan bir çözümdür. Normalde, sunucu tarafında Server-Side Rendering ile botlar tüm js dosyaları tarayabiliyor fakat her sitenin kod yapısından dolayı bu her zaman mümkün olmayabiliyor. SSR yapılamadığında arama motoru botları sitedeki bazı javascript dosyaları indexlemiyor. Dynamic Rendering ile bu durum çözülmüş oluyor.
SSR sunucu tarafında sağlanan bir yöntemdir. Dynamic Rendering ise kullanıcı tarafında aynı SSR’de olduğu gibi HTML ve JS dosyaları işler, statik bir HTML dosyası oluşturur. Arama motoru botları bu sayede siteyi eksiksiz indexler. Dynamic Rendering kullanıcı tarafında çalışıyor olması SSR ile farkları arasında en belirgin fark olarak karşımıza çıkıyor. Diğer taraftan çalışma mantığı ikisinde de hemen hemen aynıdır.
React JS İle Server-Side Rendering Yöntemleri
Single-page Application olarak tasarlanan projelerde sıkça tercih edilen ReactJS, publish alındıktan sonra tüm projeyi bir bundle haline getirir. Kullanıcı uygulamaya ulaşmak istediğinde, sıkıştırılmış halde sunulan bundle dosyası indirilir ve kullanıcı tarafında tarayıcı üzerinde işlenmeye başlar. Bu süre içerisinde kullanıcıyı sitede tutmak için yükleniyor benzeri bir sayfa göstermek gerekir.
Bu süreyi kısaltmak için Server-side Rendering yöntemi kullanılır. Bunun için sunucu tarafında server.js, server.jsx veya server.tsx gibi isimlendirmelerden birine sahip bir dosya oluşturulur. Dosya içerisine projeyi publish aldıktan soran oluşan bundle dosyayı tarayıcıya HTML olarak gönderecek ardından javascript dosyaları indirecek bir yapıya sahip kod dizisi eklenir. Bu şekilde kullanıcı uygulamaya erişmeden önce tüm projeyi indirmiş olacak, ardından uygulamayı javascript uygulanmış statik HTML olarak görecek.
React 18 öncesinde renderToNodeStream API’si üzerinden sunulurken React 18 sonrası Suspense desteği ile react-dom/server API’leri tercih edilmektedir.
Angular JS İle Server-Side Rendering Yöntemleri
Angular ile hazırlanan bir proje standart olarak tarayıcıda işlenir. Bunun yanında Angular 8 ile gelen Angular Universal ile sunucu tarafından işlenmesine imkan sağlanmıştır. Angular JS ile Server-side Rendering yöntemlerinin kullanılabilmesi için projenin Angular Universal ile desteklenmesi gerekir. Kullanıcı bir istek gönderdiğinde sunucu cevabı statik HTML içerisinde kullanıcıya gönderir, uygulama önyüklenir. Server-side Rendering ile ön yüzde istek değişse de arka yüzde kod değişmez.
Vue.js ile Server-Side Rendering Yöntemleri
Vue.js ile Server-Side Rendering yöntemlerini uygulamak için vue kütüphanesinde createSSRApp, vue/server-renderer kütüphanesindeki renderToString API’ler kullanılıyor. Sunucu üzerinde render işlemi için ReactJS’te olduğu gibi bir tane server.js isminde dosyaya ihtiyaç var.
Vue.js ile Server-Side Rendering yöntemleri için basit bir örnek arıyorsanız vue.js’in kendi dokümanlarını inceleyebilirsiniz. Bunun dışında ileri seviye gelişmiş SSR yapıları içeren hazır kütüphaneleri inceleyebilirsiniz. Aşağıda bunlardan bir kaçını bulabilirsiniz.
- Nuxt
- Quasar
- Vite SSR
Next.js ile Server-Side Rendering Yöntemleri
Next.js diğer bir javascript kütüphanesidir. Next.js ile server-side rendering yöntemleri için getServerSideProps çalıştırmanız gereklidir. Bir sayfada getServerSideProps fonksiyonunu çağırırsanız Next.js, statik sayfadaki dinamik değerleri sunucuda işleyip sayfaya yansıtacaktır.
Server-Side Rendering (SSR) ve SEO Sürecine Etkileri
Server-Side Rendering javascript isteklerinin tarayıcıda işlenmesini zorlaştırması nedeniyle arama motoru botlarının sayfaları indexlemesi uzun sürüyor. Bu da sitelerin arama sonuçlarında çıkmasını geciktiriyor. Botların bu kadar zaman kaybetmesini arama motoru sağlayıcıları da istemediği için SEO süreçlerinde bir düzenlemeye gittiler.
Özellikle Google, tarayıcı yerine sunucuda işlenen javascript dosyalarını daha az performans ile indexleyebildikleri için Server-Side Rendering tercih eden siteleri sıralamadan ön plana alıyorlar. Çünkü SSR kullanmayan diğer sayfalara göre daha çabuk indexleniyorlar ve sayfadaki değişiklikleri daha çabuk tespit edip sonuçlara yansıtabiliyor. Bu yüzden SEO süreçlerinin değişmesiyle SSR yöntemleri kullanan javascript kütüphaneleri ön plana çıkıyor.
Javascript SEO Sorunsalı – Googlebot JS İlişkisi
Javascript web geliştirme araçlarının kullanılmaya başladığı günden beridir tercih edilen bir araçtır. Sayfada dinamik bir yapı kazandırmak için javascript’e ihtiyaç duyulmaktadır. Bu yüzden vazgeçilmez bir araçtır. Bunun yanında yapısından dolayı işlenmesi aşamasında bazı sorunlar çıkarabiliyor. Özellikle gereksiz kaynak tüketimi, web sayfasına ait sunucu dışında farklı kaynaklara istek atması gibi nedenler dolayı web sayfasındaki diğer işlevleri zorlaştırabiliyor. Kullanıcılar sayfaya girdiklerinde tarayıcının arka plandaki javascript dosyalarının işlemesini beklerken zaman kaybedebiliyor, hatta sayfadan geri çıkabiliyor.
Googlebot JS ilişkisi de buna benziyor. Google arama botu bir sayfayı taramaya başladığında aslında onu kendi tarafında işleme çalışıyor. Milyonlarca sayfa olduğunu düşündüğünüzde bu işlemi her sayfa için yaptığında harcanan enerji, zaman ve maliyetlerin katlandığını tahmin edebilirsiniz. Bu yüzden Google Mayıs 2019’da yayınladığı güncelleme ile Googlebot JS ilişkisi kapsamını değiştirdi ve kullanıcılara Javascript problemlerine özel sorun giderici rehberi hazırladı. Google nazikçe sorun çıkaran javascript içeren sayfaları indexlemeyeceğini ifade etti.
Server-Side Rendering (SSR) ve Core Web Vitals & Pagespeeed Performansına Etkileri
Pagespeed performansında ve Google arama sonuçlarında en önemli takip edilen metriklerinden birisi Core Web Vitals değerleridir. Yüklenme hızı, etkileşim ve görsel kararlılık gibi metrikleri dikkate alır. Bir sayfada Server-Side Rendering (SSR) varsa Core Web Vitals değerlerine ve Pagespeed performansına etkileri olacaktır.
Üç temel metrik üzerinden etkilerini inceleyelim:
Faster Largest Contentful Paint (LCP)
LCP, saniye olarak hesaplanan bir metriktir. Değerin düşük olması LCP performansının iyi olduğunu gösterir. Sayfadaki en büyük içeriğin ne kadar sürede yüklediğini hesaplar. Pagespeed kontrolünde SSR aktif olan bir sayfada sunucuda zaten yüklü olan içeriğin yüklenme süresi elbette hızlı olacaktır. Bu da LCP değerini düşük tutacağı gibi pagespeed skorunu yükseltecektir.
Lower Cumulative Layout Shift (CLS)
CLS, sayfa açılışında düzen ve boyut değişikliğini ölçen bir değerdir. Ne kadar değişiklik oluyorsa performans düşer. SSR ile yayınlanan sitede bu şekilde değişiklikler sunucu tarafında olduğu için CLS metriğini değiştirmez. Bu da pagespeed skorunu yükseltecektir.
First Input Delay (FID)
FID, sunucuya yapılan ilk isteği ne kadar sürede yanıtladığını ölçen değerdir. Milisaniye olarak ölçülen bu değer saniyelerin üzerine çıktığında performans düşer. Pagespeed bu değeri 600 ms olarak belirlemiş, ilk isteği 600 ms üzeri yanıtlayan sayfalarda pagespeed skoru düşüyor. Sunucu tarafında işlenen sayfalarda ilk isteği yanıtlarken javascript dosyaları işlediği için sunucu performansına göre ilk istek geç yanıtlanabiliyor. Bu da pagespeed skorunu düşürebiliyor.
Server-Side Rendering Kütüphaneleri (Frameworks) ve Araçları (Tools)
En yaygın Server-Side Rendering kütüphaneleri aşağıdaki gibidir:
- React JS: hydrateRoot() metodu ile ReactDomServer nesnesini birlikte kullanır.
- Vue JS: createSSRApp() metodu tercih edilir.
- Angular JS: SSR için geliştirdiği Angular Universal kullanılır.
Server-Side Rendering işlevini kullanmak için araçlara ihtiyaç duyulduğunda Gatsby ve Netlify en çok tercih edilen araçlar arasında yer alıyor. Cloud ortamında sundukları barındırma hizmeti ile hızlı bir şekilde proje hazırlamanızı sağlıyor. Ayrıca hazır şablonlar ile kolaylıkları d bulunuyor.
Server-Side Rendering Avantajları ve Dezavantajları
Server-Side Rendering çalışma mantığı javacript dosyalarının sunucuda işlenmesi üzerine kuruludur. Bu da bazı avantajlar getirirken bazı dezavantajlara neden olmaktadır.
Server-Side Rendering Avantajları
- Arama motoru botlarının sayfayı daha kısa sürede indexlemesini sağlar.
- SEO uyumludur.
- Sayfaların tarayıcıda yüklenme sürelerini düşürür.
- Sosyal medya paylaşımlarında kullanıcı dostu index vermesini sağlar.
- Kullanıcının sunucu üzerindeki yükü azaltır.
Server-Side Rendering Dezavantajları
- Yapılandırması karmaşıktır.
- İlk sunucu istek süresini yükseltebilir.
- Önbellek dışı istek karşılamaya neden olur.
- Sunucu üzerinde uyumluluk sorunlarına neden olabilir.
- Daha fazla sunucu kaynağına ihtiyaç duyar, bu da maliyeti artırır.
- HTML boyutunu artırır.
Server-Side Rendering Performansını Monitor Etme
Server-Side Rendering performansını monitor etme işlemi için en önemli araç Core Web Vitals değerleridir. Bu değerleri Google Pagespeed hız testi sonucunda görebilirsiniz. Bunun dışında sunucu kaynak kullanımı da bazı önemli veriler sunabilir. Özellikle sitedeki kullanıcısı sayısının yüksek olduğu anlarda sunucu performansı, Server-Side Rendering performansı hakkında bilgi verecektir. Ek olarak aşağıdaki üçüncü parti monitor araçları ile SSR performansını monitor edebilirsiniz.
- New Relic
- Datadog
- Prometheus
- Grafana
Server-Side Rendering Riskleri ve Zorlukları
Server-Side Rendering kullanıcı ve arama motoru bot tarafında bir takım kolaylıkları sağladığı görülüyor. Bunun yanında bir takım riskleri ve zorlukları olduğu anlaşılıyor. Bu riskler daha çok sunucu tarafında karşımıza çıkıyor.
Sunucu tarafında daha çok kaynağa ihtiyaç ortaya çıkardığı için maliyetlere yansıyacaktır. Projenin ilerleyen aşamasında kaynak artırımı gerekebilecektir. Bu da maliyetin yanında sunucunun esnek bir yapı üzerinde olmasını göstermektedir. Tüm bunları birlikte değerlendirdiğinizde bilgi ve deneyime sahip personel ihtiyacını ortaya çıkarıyor. Hem sistemi sürdürülebilir hem de gelişime açık olabilmesini sağlayabilmek için buna benzer zorluklara hızlı çözüm sağlamak SSR’nin avantajlarından faydalanmanın diğer bir yönüdür.
Server-Side Rendering Daha mı İyi?
SSR avantajları hakkında bilgi verirken hız, SEO, sosyal medya uyumluluğu ve erişilebilirlik açısından elbette Server-Side Rendering daha iyi görünüyor. Diğer taraftan, CSR gibi daha ucuza maliyetleri olan, yapılandırması ve bakımı kolay olan çözümler daha iyi olabilir.
Burada ihtiyaç listesine göre tercih edilebilir. Maliyetler başlangıçta yüksek gibi görünse de SEO, sosyal medya gibi kullanıcı deneyimini iyileştiren sonuçlar ile geri dönüş alarak bu maliyetleri karşılayabilirsiniz. Burada iki seçenek arasında kalmak yerine bütünleşik sistemleri uygulamayı da düşünebilirsiniz. Server-Side Rendering daha mı iyi sorusunun cevabından daha çok ihtiyaçlarınızı hangi yöntemin karşılayacağını ortaya koyabilirsiniz.
Server Side Rendering Ne Zaman Tercih Edilmelidir?
Geliştirme aşamasında olan projelerde hedef kitle az olacağı için bu aşamada Server-Side Rendering tercih edilebilir. Bu sayede sunucu yükü az olacağı için arama motoru botlarına öncelik olacaktır. Bunun yanında sayfa sayısı az olan, arayüzü karmaşık olmayan siteler de tercih edebilir.