Server Side Rendering vs Client Side Rendering⚔️

Sedanur İnan
2 min readDec 25, 2023

--

Bu yazımda sizlere Server Side Rendering ve Client Side Rendering’in ne olduğundan, aralarındaki farklardan ve hangi durumda hangi yapıyı kullanmamızın daha avantajlı olacağından bahsedeceğim.

Server Side Rendering

Server Side Rendering kullandığımız bir web sitede kullanıcı sırasıyla şu işlemleri gerçekleştirir:

1 — Sunucuya ilgili sayfayla ilgili istek attı(www.example.com/about)

2 — Sunucu html ve css dosyalarının olduğu içeriği kullanıcıya gösterdi.

3 — Kullanıcı sayfa üzerinde işlem yaptı(click,write vs) ve servis javascript dosyalarını derleyip kullanıcıya döndü.

Kaynakça: https://kruschecompany.com/ssr-or-csr-for-progressive-web-app/

Bahsettiğim adımların bir react frameworkü kullanılarak nasıl yapıldığını inceleyebilirsiniz.

Serve Side Render methodunu hangi durumlarda kullanmamız gerekir?

  • Web siteniz çok fazla sayfadan oluşmuyorsa,
  • Kullanıcıların web site üzerinde çok fazla etkileşimi yoksa yalnızca içerik okumak vb işlemleri yapıyorsa,
  • SEO sizin için önemli bir faktörse

render işlemleriniz için bu methodu kullanabilirsiniz.

Client Side Rendering

Client Side Rendering kullandığımızda kullanıcılar şu adımları takip eder:

1 — Kullanıcı bir istekte bulunur (www.example.com/about)

2 — Servisten html,css ve js dosyaların birleştirildiği bir tek dosya döner. Bu dosya içerisinde o web sitede bulunan tüm sayfaların bilgileri bulunur ve kullanıcıya istekte bulunduğu sayfa ile ilgili içerik gösterilir.

3 — Kullanıcının sayfa üzerinde yaptığı herhangi bir işlem için tekrar sunucuya istek atmasına gerek yoktur.

Kaynakça:https://kruschecompany.com/ssr-or-csr-for-progressive-web-app/

Yukarıdaki görselde client side render methodu kullanılan react uygulamasında gerçekleşen adımları görmekteyiz.

Client Side Render methodunu durumlarda kullanmamız gerekir?

  • Kullanıcılarla fazla etkileşimi olan bir web sitemiz varsa,
  • Sunucuya daha az istek atıp performansımızı arttırmak istiyorsak,
  • Kullanıcılarımızın ziyaret edebileceği çok fazla sayfamız varsa,
  • SEO bizim için çok büyük bir önem arz etmiyorsa

bu methodu kullanabiliriz.

Kaynakça:

https://gokdenizcetin.com.tr/server-side-rendering-client-side-rendering/

--

--