Nedir bu server-side-rendering(ssr) ve client-site-rendering(csr)
React, VueJS ve Angular gibi javascript frameworkler populer olduktan sonra client-side-rendering, server-side-rendering, prerender gibi kavramlarla sikca karsilasmaya basladik ve bazilarimizin kafasi iyice karisti.
Yazi yerine mumkun oldugunca diagram kullanarak konuyu anlatmaya calisacagim.
Aslinda konuyu iki baslik altinda ozetleyebiliriz, client-side-rendering ve server-side-rendering
Browser sunucuya bir istek yapar, sunucu yanit olarak basit bir HTML dosyasi icerisine gomulu bir .js dosyasi dondurur, tarayici da bu .js dosyasini yorumlayarak HTML+CSS’e donusturur ve sayfa hazirdir.
Reac, VueJS ve Angular gibi js frameworkleri bu sekilde calisir.
SEO kayginiz yoksa SSR kullanmaniza gerek olmayabilir, SSR’in ortaya cikisindaki en buyuk itme motivasyonu SEO’dur.
SSR konusunu uc baslik altinda inceleyebiliriz;
1. Dynamic SSR
Varsayilan SSR diyebiliriz buna, yukaridaki SSR diagraminda da gosterdigimiz gibi sunucuya istek yapildiginda ilgili sayfa render edilir ve client’a iletilir. “on-demand”
Ne zaman kullanilir: cok buyuk ve surekli degisen sayfalariniz varsa bu yontemi kullanabilirsiniz. NextJS ve NuxtJS varsayilan olarak bu sekilde calismaktadir.
Yogun trafik alan sitelerde ciddi sunucu maliyeti yaratabilir.!
2. Static SSR
Build edilirken butun sayfalar static olarak olusturulur ve sunucuya yuklenir, sunucuya istek yapildiginda onceden olusturulmus static HTML dosyasi yanit olarak doner.
Sunucu tarafinda bir rendering(computing) yapilmadigindan Dynamic SSR’a gore cok daha hizlidir, hatta bu sekilde olusturulmus bir websitesi GCP Cloud Storage ya da AWS S3'e direkt olarak yuklenebilir.
Ne zaman kullanilir: sayfa sayisi fazla olmayan, statik yani degismeyen sitelerde kullanilabilir.
https://nextjs.org/docs/advanced-features/static-html-export
3. Hybrid SSR
Adindan da anlasilacagi uzere dynamic ve static ssr’i ayni anda kullanabilirsiniz.
stale-while-revalidate prensibinden esinlenerek yapilmistir. Ozetle her sayfa icin bir sure belirtiyorsunuz, o sure doldugunda ilgili sayfa tekrar olusturuluyor ve yeniden olusturulana kadar mevcut kopyadan sunuluyor.
Surekli bir rendering ihtiyaci olacagi icin server’a ihtiyac duyar.
NextJS bu konuda acik ara NuxtJS’den ondedir.
Bonus: Son zamanlarda adi sikca duyulan jamstack kavrami da yukarida aciklamaya calistigim yontemlerden fazlasi degildir.
