صفحات وب چگونه رندر (نمایش) داده می شوند ؟ ، مفهوم CSR و SSR

سلام و شب همگی بخیر .

قراره اول اصلا ببینیم SSR و CSR چی هستن ، چه تفاوت هایی دارن و بعد با یه جمع بندی درباره این دو مفهوم میریم سراغ بررسی Nuxt.js ! (چون توضیح مفصله ، Nuxt.js رو فردا شب کنکاش می کنیم !)

پس همراهمون باش تا مفهومی تر یاد بگیری .

اصلا رندر (Render) یعنی چی ؟!

اگر بخوایم معنی لغوی رندر رو بدونیم ، یعنی ارائه دادن و آنچنان هم از مفهوم کلیش جدا نیست !

زمانی که اتصال بین سرور و کلاینت برقرار می شه ، دیتا ها به صورت تدریجی فرستاده می شن ، پردازش می شن ، خروجی نهایی پردازش شده قالب بنده میشه و درنهایت ترسیم میشن و قابل مشاهده !

همیشه سعی کنید با دیاگرام (مثل تصویر پایین) ساختار هارو پردازش کنید ، درکش ساده تره .

حالا CSR نَمَنَ ؟

رندرینگ به دو صورت SSR (server side rendering) و CSR (client side rendering) انجام میشه !

سمت سرور => SSR ، سمت کاربر => CSR

اصلا طرز کار CSR چجوریه ؟

کاربر وبسایت رو باز می کنه ، یک CDN (content delivery network) صفحه html رو ارائه میده ، مرورگر کاربر صفحه html و فایل های جاوا اسکریپت رو دانلود میکنه (هنوز برای کاربر چیزی نمایش داده نشده) ، آروم آروم سروکله داده ها پیدا میشه و سرجای خودشون قرار می گیرن ، در نهایت سرور با یک درخواست صفحه رو به شما نشون میده !!

زمانی که سایت با Vue و React و ... طراحی میشه به صورت پیش فرض داریم از CSR استفاده می کنیم . و این کار یکسری مشکلات به وجود میاره ، مثل :

1- زمانی که سایتی رو باز می کنید ، بدون لود جاوااسکریپت عملا کویر می بینید . تا زمانی که جاوااسکریپت لود نشه ، موتور جست و جو و مرورگر نمیتونه صفحات رو index کنه !

2- کاربری که با دیوایس قدیمی میخواد سایت رو باز کنه ، کل خانوادش باهم پیوند میخورن تا یه کانتنت درست ببینه ، یعنی یکسری ویژگی ها و فیچر ها توسط دستگاه های قدیمی پشتیبانی نمیشن !

سوپرمن صفحات وب ، SSR !

اینجا بخش مورد علاقه منه ، رندر سمت سرور !

اول ببینیم طرز کار SSR چجوریه ؟

کاربر وبسایت رو باز می کنه ، سرور یک نسخه پایدار "آماده برای رندر و نمایش" از صفحه html تولید می کنه ، مرورگر مثل بنز صفحه رو از سمت سرور دریافت و آماده نمایش میکنه ، حالا نوبت دانلود جاوااسکریپته تا صفحه نمایش داده شده به کاربر تعاملی تر بشه . همین !

تعداد مراحل یکیه ، اما الگوریتم و نحوه انجام متفاوته ! همین تفاوت ها باعث میشه مزیت های SSR بیشتر از CSR باشه !

بخش نهایی ، نتیجه گیری ! کدوم بهتره ؟

باید بگیم برنده 100 درصد SSR نیست ، اما مزیت هاش عبارتند از :

• مدت زمان لود و بارگذاری سایت توی SSR پایین تره .
• از لحاظ سئو برگ برنده دوباره با SSR هستش ، همونطور که در طرز کار رندر سمت سرور اشاره شد ، همیشه یه نسخه پایدار و آماده نمایش داره که سریعا میتونه به مرورگر تحویل بده ، این باعث میشه موتور جست و جو این صفحات رو بهتر و راحت تر پیدا کنه !
• حتی با اینترنت ضعیف هم جوابگو هستش .
• کاربری که با دستگاه قدیمی وارد سایت شده ، راحت و بدون مشکل سایت رو مشاهده می کنه .
• با کش کردن (caching) سایت و ماژول ها میتونه حتی به صورت آفلاین هم براتون کار بده !

برای مطالعه درباره caching پیشنهاد میکنم لینک زیر رو فشار بدید :

https://virgool.io/@mehdinazari/%D8%B3%DB%8C%D8%B1-%D8%AA%D8%A7-%D9%BE%DB%8C%D8%A7%D8%B2-caching-chif693nmzpt

باتشکر فراوان از وقتی که گذاشتید

امیدوارم مفید بوده باشه !

مخلص ، نوید بخشیانی

منابع :

https://dev.to/solutelabs/client-side-vs-server-side-rendering-what-to-choose-when-20od

https://blog.faradars.org/how-does-the-browser-render-a-webpage/

https://nuxtjs.org/