SEO, Client Side Rendering (CSR) & Server Side Rendering (SSR)
Web sayıtlarının daha sadə, statik olduğu vaxtları xatırlayırsız? O vaxtlar bu cür saytlarının yerləşdirilməsinin yeganə səbəbi şirkət öz məhsulları haqqında məlumat vermək və satış potensialını yüksəltmək idi. Nəticə olaraq, server tərəfdə render edilmə, HTML-ni ekranınıza gətirməkdən ibarət idi. HTML-i bir serverə yükləyə bilər və server onları istifadəçilər üçün faydalı sənədlərə çevirə bilərdi.
Texnologiyanın inkişafı və güclü rəqabət nəticəsində həm web texnologiyalar inkişaf edir və eyni zamanda sayıtların funksionallıqları genişlənir yəni tələb-təklif güclənir. Bu kimi sayıtara, e-commerce, blog, xəbər sayıtları və s. aiddir. Məhsul sahibinə artıq maralıdır ki, web səhifəsi həmdə SEO cəhətdən də təkminləşmış olsun 👩💻.
SEO nədir❓
SEO, ingiliscədən qısaldılıb “Search Engine Optimization” deməkdir. Yəni “Axtarış Motoru Optimizasiyası” kimi təcümə edilə bilər. SEO, bir web səhifəsinin axtarış panelində (ödənişsiz) daha ön sıralarda çıxması üçün edilən bütün texniki və strateji işdir. SEO-nun məqsədi web sayıtın axtarış panelində daha ön sıralara çıxaraq, əlaqəli kütləyə tez çatmasını təmin edir. Bunun üçün axtarış motoru alqoritmlərinin təmin edilməsi, keyfiyyətli məzmun, uyğun açar sözlərin seçilməsi, saytın strukturunun optimallaşdırılması, səhifə sürətinin artırılması, mobil uyğunluğun (responsivlik) təmin edilməsi, linklərin əlavə olunması və sosial media ilə əlaqənin artırılması daxildir.
Axtarış botları tərəfindən Javascript-də yazılmış saytların düzgün render edilməsi və indeksləşdirilməsi üçün əsasən iki fərqli proses vardır.
Bu məqalədə CSR və SSR haqqında etdiyim araşdırmadan yazacağam.
Client Side Rendering (CSR) nədir ❓
CSR, “müştəri tərəfindən göstərilən” anlamına gəlir. CSR-də web səhifələrinin və ya istifadəçi UI-nın rendering-i istifadəçinin web browseri, yəni client tərəfindən gerçəkləşir.
CSR necə işləyir❓
📍 Client serverə sorğu göndərir (adətən browser ilə). Yeni tutaq ki, axtarış panelində https://sayıtadı.com/xəbərlər yazıb sorğu göndəririk;
📍 Server sorğunu qəbul edir və cavabı client-e minimal HTML səhifə skeleti şəklində göndərir;
📍 Browser HTML-ni, sonra isə JS-i yükləyir, bu vaxt istifadəçi yükləmə simvolunu görür;
📍 Browser JS fayıllarını götürdükdən sonra API sorğuları göndərir və yekun nəticə əldə etmək üçün onu emal edilir;
📍 Server cavab verdikdən sonra yekun görüntü əldə olunur 🎉
⏫ CSR üstünlükəri:
⇾ Minimum server yükü sərf edir;
⇾ İlkin yükləmədən sonra web saytın daha sürətli göstərilməsi baş verir. İstifadəçi web tətbiqinin səhifələri arasında keçid etdikdə yalnız yeni məlumatlar göstərilir. Bunu yəqin ki, gündəlik istifadə etdiyiniz tək səhifəli web proqramlardan birində özünüz görə bilərsiniz. Sadəcə Gmail-i açın və o yükləndikdən sonra “Yarat” düyməsini basın. Məzmunun qalan hissəsi eyni qalarkən dərhal yeni modal pəncərənin göründüyünü görəcəksiniz;
⇾ Geniş JavaScript kitabxanası seçimi.
⏬ CSR mənfi tərəfləri:
⇾ İlk yüklənmə daha çox vaxt tələb edə bilər. Köhnə versiyalı browser və ya yavaş internet bağlantısı olduqda, daha uzun ilkin gözləmə müddətinə səbəb olur. Buda istifadəçinin sayıtı tərk etməsinə səbəb ola bilir;
⇾ Çox hallarda xarici bir kitabxana tələb edir;
⇾ SEO-nun zəif olması. Google JavaScript ilə yüklənmiş web saytların indeksləşdirilməsində irəliləyiş əldə etsə də, hələ də problem qalmaqdadır.
Server Side Rendering (SSR) nədir❓
SSR, “server tərəfindən göstərilən” anlamına gəlir. Web səhifələrinin və ya istifadəçi UI-nın client-ə browser-nə göndərilməzdən əvvəl server tərəfində gerçəkləşməsidir. Daha anlaşılır desək, yəni bütün kodunuz, əvvəlcə server tərəfində hazır olun, sonra tam hazır olunmuş səhifə istifadəçiyə göstərilirş.
SSR necə işləyir❓
📍 Client serverə sorğu göndərir (adətən browser ilə). Yeni tutaq ki, axtarış panelində https://sayıtadı.com/xəbərlər yazıb sorğu göndəririk;
📍 Server sorğunu qəbul edir və lazımi məlumatların alınması, işlənməsi və göstərilməsi əməliyyatlarını yerinə yetirir;
📍 Hazır olunmuş HTML göstərilməsi üçün client-in browser-nə göndərilir;
📍 Browser HTML-ni yükləyir və saytı istifadəçiyə görünən edir;
📍 Browser daha sonra Javascript-i yükləyir və səhifə dinamik hala gəlir🎉
⏫ SSR üstünlükləri:
⇾ Server client-e tam göstərilən HTML səhifəsini göndərdiyindən, axtarış botu, məzmunu asanlıqla oxuya və indeksləşdirə bilir. Yəni SEO cəhətdən əlverişlidir;
⇾ SSR ilkin səhifə yüklənməsi qısa zamanda baş verir, çünki client serverdən tam məzmunlu səhifəni alır. Bu, xüsusilə yavaş internet bağlantısı olan istifadəçilər üçün əlçatandır;
⇾ SSR, client-in web browser-i JavaScript-i dəstəkləməsə və ya söndürsə belə, ilkin səhifə məzmununun əlçatan olmasını təmin edir;
⇾ Server hər sorğuda HTML məzmunu yaratdığından, performansı yaxşılaşdırmaq üçün məlumatları keşləyir. Keşləmə server yükünü azaldır və sonrakı sorğular üçün cavablar qısa vaxtda geri qayıdır.
⏬ SSR mənfi tərəfləri:
⇾ Ağır server yükü. SSR, istifadəçilərdən gələn çoxsaylı eyni vaxtda sorğular serverin cavabını ləngidə bilər;
⇾ Web sayıtın səhifələri daxilində keçidin ləngiməsi. SSR, web saytın səhifələri arasında keçid etməli olduqda, fərq minimal olsa belə, hər səhifə sıfırdan göstərilir. Məsələn, istifadəçi bloqda bir məqalədən digərinə keçdikdə, bütün bloq səhifələrində eyni olsa belə, başlıq və altbaşlıq yenidən göstərilir.
NƏTİCƏ 👀
Javascript library ve framworks ile yazılmış müasir web səhifələrinin render prosesi CSR və SSR olaraq ikiyə bölünür. CSR ilə yazılmış web səhifələrində indexləşmə problemi olduğu üçün Google axtarış botları SSR olan web sehifələrini dəstəkləyir.
Javascript library və framework-lərinin SSR dəstəkləmsi üçün özlərinin inteqrasiya metod və framework -ləri mövcüddur;
💎 React → Next.js, Gatsby
💎 Angular → Angular Universal
💎 Vue.js —> Nuxt.js
Mənbələr 🙏
1.https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when
2.https://clockwise.software/blog/client-side-vs-server-side-vs-pre-rendering/
3.https://www.clariontech.com/blog/server-side-rendering-vs.-client-side-rendering
4.https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering
5.https://zeo.org/tr/kaynaklar/blog/javascript-seo-ssr-ve-csr-nedir-avantajlari-ve-dezavantajlari
— Happy Coding!😇
