Client Side Rendering vs Server Side Rendering – Hangisi SEO İçin Daha İyi?

Client Side Rendering vs Server Side Rendering – Hangisi SEO İçin Daha İyi?

Client Side Rendering vs Server Side Rendering – Hangisi SEO İçin Daha İyi?

Web siteleri 2023 yılına geldiğimizde artık daha dinamik bir yapıya sahip. Peki bunu mümkün kılan nedir? Elbette Javascript framework’leri ve bu framework’lerin sunduğu teknolojiler. Özellikle Javascript framework’leri sayesinde dinamik içerik oluşturmak eskisinden daha kolay.

Sorunsuz bir kullanıcı deneyimi sağlayan web sayfalarının daha hızlı yüklenmesi Next.js, Nuxt.js ve Vue.js gibi framework’lerle mümkündür. Bu bağlamda, özellikle SEO için önemli olan kısımlardan biri de kullandığınız framework’lerin istemci tarafında mı yoksa sunucu tarafında mı render edildiğidir.

Bu da şu soruyu sormamıza neden oluyor: Client Side Rendering mi yoksa Server Side Rendering mi SEO için daha iyi?

Bu sorunun cevabını verebilmek için öncelikle bu iki kavramın ne olduğuna ve ne anlama geldiğini bilmek gerekiyor.

Client Side Rendering Nedir?

Client Side Rendering, JavaScript kullanarak sayfaları doğrudan tarayıcıda oluşturmayı sağlayan bir render işlemidir. Web sitesindeki tüm dosyaların çalışma mantığı sunucu tarafında değil, siteyi ziyaret eden kullanıcının tarayıcısında gerçekleşmesidir.

Client Side Rendering Nasıl Çalışır?

Client Side Rendering işleminde kodlar kullanıcının tarayıcısında çalışmaya başladıktan sonra sayfa kullanılabilir hale gelir. Çoğu yerde CSR tekniği ile ilgili olarak, çalışma mantığı nedeniyle kullanıcıların boş sayfalar gördüğü söylenir, ancak bahsedilen süreler oldukça düşük olduğundan aradaki farkı anlayabilmek bu noktada pekte mümkün değildir.

CSR’ın kısa çalışma mantığı aşağıdaki gibidir:

  • Kullanıcı siteyi ziyaret eder ve sunucu tarayıcıya bir yanıt gönderir
  • Tarayıcı JS dosyalarını yüklemeye başlar
  • Tarayıcı indirdiği JS dosyalarını yürütür
  • Artık sayfa kullanılabilir ve etkileşime girilebilir hale gelir

Görsel olarak aşağıdaki şema ile CSR’ın çalışma mantığını görebilirsiniz.

client side rendering nasıl çalışır

client side rendering nasıl çalışır

Client Side Rendering Avantajları

Client Side Rendering ve Server Side Rendering arasında bazı farklılıklar ve bu iki kullanımın da birbirine karşı avantajları ve dezavantajları vardır.

  • Sunucuyu daha az yorar
  • Daha iyi kullanıcı arayüzü ve deneyimi sunar
  • Azaltmış sunucu tarafı istekleri

Client Side Rendering Dezavantajları

Yukarıda CSR’ın avantajlarından kısaca bahsettik. Dezavantajları da aşağıdaki gibidir.

  • Daha yavaş ilk yükleme süresi
  • Doğru uygulanmadıysa SEO sorunlarına neden olabilir
  • Sayfa tamamen yüklenene kadar önbelleğe (cache) almak mümkün değildir

Client Side Rendering’in kısaca ne olduğunu, nasıl çalıştığını, avantajlarını ve dezavantajlarını anlattığımıza göre Server Side Rendering kısmına geçiş yapabiliriz.

Server Side Rendering Nedir?

Server Side Rendering (SSR), bir web sitesinin sunucudaki HTML dosyalarını tarayıcı için tamamen işlenmiş bir HTML sayfasına dönüştürme tekniğidir. Yani CSR’ın aksine SSR’da render işlemi tarayıcı tarafında değil, sunucu tarafından oluşturulur.
Kısacası, sitenizi ziyaret eden kullanıcıların, JavaScript dosyalarının yüklenmesini beklerken oluşabilecek bir sorun da boş ekrana bakmaları yerine her şeyi çok daha hızlı görebilecekleri anlamına gelir.

Server Side Rendering Nasıl Çalışır?

Server Side Rendering işlemi dört aşamadan oluşur. Ufak bir senaryo ile;

  • URL’i yazdınız ve siteye giriş yaptınız,
  • Sunucu, istemciye işlenmeye hazır bir HTML yanıtı verir
  • Tarayıcı, alınan HTML’i işler ve JS kodunu indirir. Bu aşamada, sayfa görüntülenmeye hazırdır.
  • Tarayıcı, JS kodunu yürütür
  • Sayfa artık etkileşime hazır hale gelir.
server side rendering nasıl çalışr

server side rendering nasıl çalışır

Server Side Rendering Avantajları

  • HTML tamamen sunucu tarafında oluşturulduğundan ve web tarayıcıları HTML sayfalarını daha kolay dizine ekleyebildiğinden dolayı daha iyi SEO performansı elde edilir.
  • Hızlı ilk yükleme süreleri
  • Largest Contentful Paint metriklerinde ciddi iyileşme sağlar.
  • Render işlemi için Google botlarına güvenmenize gerek yoktur.
  • Tarayıcılar kodları çalıştırmak zorunda kalmazlar.
  • Meta verilerinden yararlanmanıza olanak tanır.

Server Side Rendering Dezavantajları

  • Sunucu tarafına sık istek gitmesi
  • Daha yavaş etkileşim süresi
  • Daha düşük Time to First Byte değeri (bağlantıya tıklama ile içeriğin ilk parçasını alma arasındaki süre)

CSR ve SSR Ne Zaman Kullanılır?

Kısaca CSR ve SSR’ın ne olduğuna, nasıl bir sıralama ile çalıştıklarına, avantajlarına ve dezavantajlarına göz attık. Şimdi sırada hangi durumlarda bu tekniklerin kullanılması gerektiğine de değinelim.

Tekrar hatırlatmakta fayda var, CSR ve SSR arasındaki temel fark, sayfanın oluşturulduğu yerdir. SSR, sayfayı sunucu tarafında işlerken CSR ise bunu tarayıcı tarafında yapar. Aşağıdaki maddeler hangi durumlarda SSR kullanmanız gerektiğini, hangi durumlarda CSR kullanmanız gerektiğini göstermektedir.

SSR Kullanabileceğiniz Durumlar

  • SEO’ya öncelik vermek ve organik trafiğinizi artırmak istiyorsanız SSR kullanmalısınız. Özellikle de SSR blog siteleri için oldukça verimli çalışmaktadır.
  • Web siteniz daha hızlı bir ilk yüklemeye ihtiyaç duyduğunda SSR kullanılabilir.
  • Web sitenizdeki içerik çok fazla kullanıcı etkileşimi gerektirmiyorsa SSR kullanılabilir.

CSR Kullanabileceğiniz Durumlar

  • Uygulama, birçok sayfa/özellik içeren çok karmaşık bir kullanıcı arayüzüne sahip bir web siteniz varsa CSR kullanılabilir.
  • Web sitenizde çok fazla etkileşim gerektiren ögeler varsa CSR kullanılabilir.
  • SEO sizin için o kadar önemli değilse CSR kullanılabilir.

SSR Tekniğini Destekleyen Javascript Framework’leri

Bir projeye başlarken yazılımcıların sıfırdan Amerika’yı keşfetmelerine gerek yoktur. Şu anda yazılım dünyasında Server Side Rendering tekniği destekleyen ve oldukça kullanışlı Javascript framework’leri vardır.

Framework’ler bu noktada yazılımcılara, projelere hızla başlamak için önceden hazırlanmış şablonlar ve araçlar sayesinde zamandan tasarruf etmelerini sağlar. Ayrıca belirli özelliklere odaklanarak kaliteyi artırabilirler.

Next.js

next-js-logo

React ile yazılmış bir web sitesi yapmak istiyorsanız, bu noktada öncelikli olarak, daha iyi SEO sonuçları, daha kolay sosyal medya optimizasyonu ve daha hızlı render için SSR tekniğini kullanabileceğiniz Next.js framework’ünü kullanabilirsiniz. Next.js uçtan uca tamamen SSR için destek sunan bir framework’dür.

Vue.js

vue js logo

Vue.js, varsayılan olarak, CSR tekniğini kullanmaktadır, ancak Vue.js’de SSR yapmak da mümkündür. Vue.js aynı zamanda şu anda en popüler JS framework’lerinden biridir ve çok çeşitli birçok dinamik web sitesi geliştirilebilir.

Nuxt.js

nuxt-js-logo

Nuxt.js harika şablonlara ve içeriklere sahip minimalist bir framework’dür. Nuxt.js, sunucu tarafında oluşturulmuş uygulamaların tüm avantajlarını (SEO kullanım kolaylığı, daha hızlı başlatma vb.) Vue.js’in reaktif bileşen mimarisiyle birleştirir.

Ember.js

embers logo

Ember.js yine açık kaynaklı kodlu bir başka framework’dür. 2011 yılından beri geliştirilmekte olan bu framework, Single Page Applications (SPAs) yani tek sayfa projeler geliştirmek için harikadır.

SEO İçin CSR mı Yoksa SSR’mı Kullanılmalı?

Artık SSR ve CSR arasındaki farkı ve her yöntemin ne zaman kullanılması gerektiğini bildiğimize göre, SSR’ın hızlı ilk sayfa yüklemelerini, SEO dostu bir yapıya sahip olmasını, CSR’ın dinamik yapılar ile kullanıcı deneyimini artıran özelliklerini birleştirmenin bir yolu olup olmadığını merak ediyor olabilirsiniz. GatsbyJS ve Next.js gibi bazı modern framework’ler hibrit bir yaklaşım altında çalışabilmektedir.

Bu framework’ler ile, ilk sayfaları SSR ile yükleyebilir, ardından sonraki sayfaları yeniden yüklemek için CSR’ı kullanabilirler. Bu şekilde, her iki tekniğinde en iyisini elde etmiş olursunuz.

Ancak şunu da belirtmekte fayda varki, bu tekniklerin doğru şekilde kullanılması gerekmektedir. Yanlış kullanımlar size olumsuz sonuçlar olarak geri dönebilir.

Hibrit çalışma tekniğini istemiyorsanız bu noktada SEO için en uygun teknik SSR olacaktır.

Core Web Vitals Metriklerine Göre Framework’lerin Hızları

İçeriğimizin sonuna gelirken, hız konusuna da değinmeden bitirmek istemedik. Belki hali hazırda bu framework’lerden birini kullanıyorsunuz veya kullanmak istiyorsunuz ancak hangi framework’ün site hızı konusunda ne durumda olduğunu merak ediyor olabilirsiniz. Aşağıda, JS framework’lerin Core Web Vitals metriklerindeki performansını görebilirsiniz.

Google Lighthouse Performans Skoru

  • Astro – 99,2
  • SvelteKit – 99
  • Nuxt.js – 98,8
  • Next.js – 98,6
  • Gatsby – 95,6

First Contentful Paint (FCP) Sonuçları

  • Astro – Gatsby: 0.8 saniye
  • SvelteKit – Next.js: 0,9 saniye
  • Nuxt.js – 1,1 saniye

Speed Index Sonuçları

  • SvelteKit – 2,3 saniye
  • Astro & Remix – 2,8 saniye
  • Nuxt 3 – 2,9 saniye
  • Next.js – 3,2 saniye
  • Gatsby – 5,6 saniye

Largest Contentful Paint (LCP) Sonuçları

  • Astro – 0,8 saniye
  • SvelteKit – 0,9 saniye
  • Next.js, Nuxt.js – 1.2 saniye
  • Gatsby – 1,9 saniye

Time To Interactive (TTI) Sonuçları

  • Astro – 0,8 saniye
  • SvelteKit – 1,0 saniye
  • Nuxt 3 – 1,2 saniye
  • Remix & Gatsby – 1,5 saniye
  • Next.js – 1,7 saniye

Total Blocking Time (TBT) Sonuçları

  • Astro – 0ms
  • Nuxt 3 – 20ms
  • Gatsby – 28ms
  • Remix – 30ms
  • SvelteKit – 36ms
  • Next.js – 54ms

Time To First Byte (TTFB) Sonuçları

  • SvelteKit – 62ms
  • Next.js – 63 ms
  • Gatsby – 133ms
  • Remix – 136ms
  • Astro – 137ms
  • Nuxt – 438ms

SEO ile ilgili diğer içeriklerimizi de okuyabilirsiniz.

2019 yılında SEO ile tanışan Ekim, 2020 yılında profesyonel iş hayatına giriş yaptı. SEO Trainee olarak başladığı kariyer hayatına, 2023 yılına geldiğinde Adsera'da Senior SEO Executive olarak devam etmektedir.

Diğer Yazılar

Google Analytics 4 Nedir? Detaylı Rehber

28.04.2023 / 14:15

Google Analytics 4 (GA4), Google'ın web analitiği platformunun en son sürümüdür. Önceki

Multi Dil Web Siteleri İçin SEO Stratejileri

28.04.2023 / 14:15

Günümüzde, birçok işletme ve web sitesi, uluslararası bir kitleye erişmek amacıyla çok dil

e-Ticaret Siteleri İçin SEO Süreçleri Nasıl Olmalıdır?

28.04.2023 / 14:15

e-Ticaret siteleri için SEO süreçleri, online mağazanızın web trafiğini artırmanın ve p

Sitenize Zarar Verebilecek 4 SEO Yanılgısı

28.04.2023 / 14:15

SEO, hali hazırda bir okulu olmadığından ve Google'ın çoğu zaman duyurduğu güncellemeler n

Teknik SEO Nedir ve Neden Önemlidir?

28.04.2023 / 14:15

Teknik SEO, sıralama almış olduğunuz sayfalarınızın sıralamasını yükseltmek için en öne

Hotjar'a Alternatif Olarak Kullanabileceğiniz Uygulamalar

28.04.2023 / 14:15

Hotjar, sitemizi ziyaret eden kullanıcıların yolculuklarını, web sitesi içerisinde nasıl

Marka Bilinirliği ve SEO'nun İlişkisi

28.04.2023 / 14:15

Her markanın, hem online’da hem de dijital’de öne çıkması için “marka bilinirliğine” iht

PPC veya Tıklama Başına Ödeme: Nasıl Çalışır, Avantajları ve Örnekler

28.04.2023 / 14:15

PPC veya Tıklama Başına Ödeme: Nasıl Çalışır, Avantajları ve Örnekler PPC veya tıklama

Google Ads Kalite Puanı Nedir? Ads Kalite Puanı(1-10)

28.04.2023 / 14:15

Google Ads Kalite Puanı Nedir? Ads Kalite Puanı(1-10) Google Ads Kalite Puanı Nedir?

Performans Pazarlaması Nedir?

28.04.2023 / 14:15

Performans Pazarlaması Nedir? Performans pazarlaması, bir reklam verenin yalnızca elde et

SEO Nasıl Yapılır? Blog Yazılarınız İçin SEO Rehberi

28.04.2023 / 14:15

SEO Nasıl Yapılır? Blog Yazılarınız İçin SEO Rehberi SEO yani arama motoru optimiz