SSR و CSR چیست؟ کدام یک از آن ها برای طراحی سایت بهتر است؟
SSR و CSR چیست؟ کدام یک از آن ها برای طراحی سایت بهتر است؟

CSR چیست؟ SSR چیست؟ آیا کلمات ISR و SSG را در طراحی وب شنیده اید؟ برای پاسخ به این سوالات اول از همه باید به این موضوع بپردازیم که رندر صفحات به چه شکلی انجام می شود.

تاریخچه بوجود آمدن روش های رندرینگ صفحات وب

چند سال قبل تمامی وبسایت ها و وب اپ ها (WebApp) در رندر و بارگذاری صفحات استراتژی یکسانی (SSR) داشته اند. به این شکل که محتوای صفحه ما به عنوان یک سند HTML به همراه استایل های CSS در سمت سرور پردازش می شد و به سمت مرورگر ارسال می شدند. و در آخر مرورگر این صفحات را اجرا می کرد و به کاربر نمایش می داد.

با افزایش نقش Js در وبسایت ها و همچنین بوجود آمدن فریمورک های مختلف از این زبان محبوب، راه و روش جدیدی برای توسعه برنامه های وب ایجاد شد. فریمورک هایی مانند ReactJs، NextJs، AngularJs و … توانستند پردازش صفحات را سمت مرورگر کاربر پردازش کنند. با این کار بار پردازشی را از روی سرور کم شده و در نتیجه‌ی آن سرعت وبسایت ها دیگر بستگی به سیستم کاربران دارد. امروزه نیز اکثر کاربران از سیستم های پرقدرتی استفاده می کنند.

در سناریوی جدید لود صفحات وب، سرور تنها فایل پایه ای از Html را لود می کند. از اینجا به بعد این مرورگر است که برای لود محتوای داخل این صفحه هر بار در خواستی را به سمت سرور ارسال می کند و در این اسکلت بندی کلی نمایش می دهد. این کار باعث می شود تا در لود مجدد صفحات، فقط محتوا از سرور دریافت شود. این کار باعث افزایش سرعت در پیمایش صفحات شده و به اصطلاح میتوانیم وبسایت های SPA (Single-Page-Application) را ایجاد کنیم.

در این مقاله از تیک4 قصد داریم روش های پردازش صفحات وب را معرفی کنیم. در آخر نیز با بیان مزایا و معایب هر کدام از آن ها بهترین آن ها را برای کار مورد نظرتان معرفی کنیم.

SSG چیست؟

ssg چیست؟ | روش کار رندر صفحات به روش SSG | تیک4

در فرایند SSG (Static Site Generation) همانند سالیان قبل که سیستم های مدیریت محتوا همانند وردپرس آنچنان محمبوب نشده بودند، تمامی صفحات وبسایت به صورت استاتیک طراحی می شوند. این سیستم هنوز هم طرفدار دارد. به این صورت که در یک وبسایت به عنوان مثال Landing Page ها و یا سایت های تک صفحه ای، دیگر نیازی به دیتابیس و لود محتوای داینامیک نیست. بنابراین تمامی صفحات به صورت استاتیک (Html , Css) ساخته می شوند و در اختیار کاربران قرار می گیرند. در واقع تمامی صفحات از قبل رندر گرفته شده اند و فقط به کاربر نمایش داده می شوند.

مزایای SSG:

  • توانایی ساخت سایت هایی که نیاز کمتری به دیتابیس و فرایند های سمت سرور دارند.
  • سایت های ساخته شده به این روش به دلیل اینکه از قبل ساخته شده اند سرعت بسیار زیادی دارند.
  • به دلیل اینکه محتوای آن ها از دیتابیس گرفته نمی شود امنیت بسیار بالایی دارند.
  • بهترین گزینه برای بهینه سازی موتور های جستجو (SEO) می باشند.

معایب SSG:

  • به دلیل اینکه محتوا به صورت استاتیک در سایت قرار می گیرند، ویرایش و انتشار محتوا بسیار دشوار است.
  • بروزرسانی محتوا نیازمند آزمایش و استقرار مجدد اسناد در هاست می باشد.
  • اگر تعداد صفحات زیاد شود، نگهداری از آن ها بسیار دشوار خواهد بود.
  • مدت زمان زیادی برای ساخت چنین وب سایت هایی باید صرف شود.

چه زمانی باید از SSG استفاده کنیم؟

شاید این فرایند (Static Site Generation) مزایای زیادی مخصوصا در زمینه SEO داشته باشد. اما استفاده از آن فقط زمانی عقلانی است که شما تغییرات کمی در سایت خود دارید. مثلا برای یک وبسایت که ویترین محصولات است گزینه مناسبی است. حتی اگر با بازسازی صفحات وب سایت خود مشکلی ندارید، میتوانید یک وبلاگ با SSG راه انداری نمایید. ولی در نهایت پیشنهاد می شود هر گز در سایت هایی با محتوای پویا از SSG استفاده ننمایید.

 

SSR چیست؟

سیستم لود صفحات SSR (Server Side Rendering) روشی است که تمام پردازش صفحات وب، سمت سرور انجام می شود. یعنی بعد از اینکه محتوا از دیتابیس دریافت شد در صفحه Html قرار گرفته و پس از استایل دهی به کمک Css به سمت کاربر ارسال می شود. در این روش فایل های Js معمولا در آخر لود می شوند. این روش که کاملا میان سایت ها به خصوص سایت های وردپرسی مرسوم است، از مراحل زیر پیروی می کند:

  1. درخواست از طریق مرورگر کاربر به سمت سرور ارسال می شود.
  2. سرور بعد از بررسی منابع، محتوای Html را پس از اجرای کد ها در سمت سرور آماده‌سازی می کند.
  3. این سند Html که محتوا درون آن قرار گرفته به سمت مرورگر کاربر ارسال می شود.
  4. مرورگر سند دریافتی از سمت سرور را به کاربری که درخواست را ارسال کرده نمایش می دهد.
  5. در مرحله آخر، مرورگر فایل های Js را دانلود کرده و با اجرای آن ها سایت شما را تبدیل به یک سایت interactive و یا تعاملی می کند.

ssr چیست؟ | روش کار رندر صفحات به روش SSR | تیک4

مزایای SSR:

  • می توان سایت های داینامیک و پویا با این روش ایجاد کرد.
  • سرعت آن از SSG کمتر است. اما به دلیل اینکه محتوا به محض رندر شدن سمت سرور به کاربر نمایش داده می شود، عملکرد خوبی دارد.
  • این سایت ها چون در سمت سرور رندر می شوند با بهینه سازی موتور های جستجو (SEO) سازگاری دارند.

معایب SSR:

  • این فرایند به قدرت پردازش بالایی سمت سرور نیاز دارد. در نتیجه برای سایت های بزرگتر باید منابع سرور را قوی تر تهیه نمود.
  • چون تمام پردازش ها سمت سرور انجام می شود. تامین امنیت سایت های SSR کار دشواری است.
  • فرایند کش (Cache) به سختی انجام می شود.

چه زمانی باید از SSR استفاده کنیم؟

از آنجایی که Server Side Rendering هزینه های سرور را افزایش می دهد، معمولا در سایت هاییی که محتوای بسیار پویایی دارند و دائما تغییر می کنند، از SSR استفاده می شود. مثال خوب در این زمینه سایت های خرید و فروش سهام هستند.

ISR چیست؟

فرایند Incremental Static Regeneration (ISR) یا همان بازسازی استاتیک افزایشی است. این جمله یعنی چی؟ در واقع این فرایند به این صورت انجام می گیرد که بدون نیاز به بازسازی سایت، از SSG استفاده می کنیم. شما می توانید با استفاده از ISR، نه تنها مزایای سرعت صفحات استاتیک را داشته باشید، بلکه در ملیون صفحه آن ها را مقیاس بندی کنید. به عبارت دیگر با این فرایند می توانید از مزایای SSG و SSR در کنار هم استفاده کنید. از بزرگترین فریمورک هایی که در این زمینه کار می کنند می توان به Next.Js اشاره کرد.

isr چیست؟ | روش کار رندر صفحات به روش ISR | تیک4

مزایای ISR:

  • ISR همانند دو مورد قبل صفحات را از قبل رندر کرده و آن‌ها را کش می‌کند. در نتیجه سرعت بالایی دارد.
  • تغییر و ویرایش محتوا نیازی به استقرار مجدد سایت روی هاست ندارد.
  • ISR نیز مانند دو مورد قبل با بهینه سازی موتور های جستجو (SEO) کاملا سازگار است.

معایب ISR:

  • فراید لود صفحات به شکل ISR تنها یک ایراد بزرگ دارد. آن هم این است که بعضی اوقات، پس اصلاح صفحات همچنان محتوای قدیمی برای کاربران نمایش داده می شود و نسخه جدید آن در دسترس قرار نمی گیرد.

چه زمانی باید از ISR استفاده کنیم؟

از Incremental Static Regeneration (ISR) زمانی استفاده می شود که محتوای سایت به ندرت تغییر کند. همانند سایت های فروشگاهی و یا وبلاگ ها. امروزه استفاده از این روش رو به افزایش است و هر نوع وبسایتی را می توانید ببینید که با این روش کار می کنند.

 

CSR چیست؟

Client-side Rendering یا CSR، یکی از راه های نمایش و رندر صفحه وب در مرورگر است. در این روش، بار ایجاد محتوای پویا و ایجاد HTML برای آن‌ها، برعهده مرورگر کاربر است. این روش توسط فریم‌ورک‌ها و کتابخانه‌های جاوااسکریپتی، نظیر: ReactJS، VueJS و AngularJS، پیاده‌سازی می‌شود. روند طبیعی رندر صفحات وب در این روش، مراحل زیر را دنبال می‌کند:

  1. مرورگر درخواستی را به سمت سرور ارسال می کند.
  2. در این مرحله می توان درخواست ها به یک CDN یا شبکه تحویل محتوا ارسال شود. تا این فایل هایی مانند: HTML استاتیک، CSS و سایر فایل‌های ثابت و استاتیک را از آن ها دریافت کرد.
  3. هنگامی که مرورگر در حال دانلود HTML و سپس فایل‌های جاوااسکریپت است، نشانه از بارگذاری سایت (پراگرس بار ، اسپینر و …) را به کاربر نمایش می دهد.
  4. پس از اتمام دانلود، مرورگر با درخواست های Ajax محتوا را از طریق API دریافت کرده و داخل سند Html رندر می شود.
  5. در آخر محتوای رندر شده در DOM مرورگر نمایش داده می شود.

csr چیست؟ | روش کار رندر صفحات به روش CSR | تیک4

از آنجایی که دریافت و پردازش داده، در سمت کاربر انجام می‌شود، این فرآیند را Client-side Rendering می‌نامند.

مزایای CSR:

  • توانایی ساخت صفحاتی با محتوای پویا همانند صفحات فیلتر محصولات
  • هزینه پایین سرور بر خلاف SSR ویا حتی SSG
  • بارگیری سریع صفحات پس از اولین بارگذاری

معایب CSR:

  • سازگار نبودن با بهینه سازی موتور جستجو (SEO)
  • از آن جایی زمان بارگذاری اولیه زیادی دارد، باعث عملکرد ضعیف آن می شود.

چه زمانی باید از CSR استفاده کنیم؟

در وبسایت هایی که به سئو (SEO) متکی نیستند یا به اصطلاح وب اپ (WebApp) ها از این فرایند استفاده می شود. هم چنین می توانید با استفاده از ابزار هایی مانند Electron و Tauri تعاملات متعددی را در وبسایت‌ها، اپلیکیشن‌های وب و اپلیکیشن‌های کراس پلتفرم ایجاد کرد.

تفاوت SSR و CSR

از میان 4 روش بارگذاری صفحات وب، پرکاربرد ترین آن ها CSR و SSR هستند. این دو روش همچنان که دیدیم تفاوت هایی با یکدیگر دارند که به اختصار در قسمت مزایا و معایب هر کدام از آن ها بیان شد. در ادامه این مقاله از تیک4 به طور مفصل به آن ها می پردازیم.

 زمان بارگذاری صفحه

مدت زمانی است که پس از درخواست کاربر برای لود صفحه، طول می کشد تا آن صفحه به صورت کامل لود شود. در واقع این مفهوم مهمی برای تجربه کاربری ویا UX سایت شما می باشد. از آنجایی که در CSR و SSR دو سناریوی متفاوت اتفاق میفتد، پس مدت زمان آنها متفاوت است.

در SSR چون فایل ها همگی سمت سرور رندر شده و سپس برای نمایش به سمت مرورگر کاربر ارسال می شوند، زمان بارگذاری اولیه و همچنین برای دفعات بعد یکسان خواهد بود. زیرا هر بار تمامی فایل های مورد نظر برای آن صفحه (سند Html، فایل های استایل و فایل های Js) در مرورگر کاربر دانلود می شوند. مگر اینکه به کمک Caching این مدت زمان برای دفعات بعدی بهینه شود.

اما در CSR این فایل ها فقط برای دفعه اول بارگیری می شوند و در واقع صفحه Html سمت مرورگر کامپایل می شود. بنابراین فقط در اولین لود زمان زیادی صرف می شود. برای دفعات بعدی فقط بخشی از صفحه تغییر می کند و از استایل ها و اسکریپت هایی که در دفعه اول لود شده است استفاده می کند. این کار باعث می شود که در سایت هایی که تعامل بیشتری با کاربر دارند، سرعت بیشتری را تجربه کنیم.

در خصوص مدت زمان اولیه بارگیری ابن نکته را یادآوری کنیم که SSR سرعت بیشتری دارد. زیرا فقط فایل هایی که برای نمایش آن صفحه نیاز است لود می شوند و فایل های Js که برای تعامل کاربر با سایت مورد نیاز است در آخر لود می شوند.

تاثیر Caching

امروزه Caching به یک امر مهم برای سرعت بخشیدن به برنامه های تحت وب تبدیل شده است. همانطور که برای وب سایت های SSR از Cache اسکریپت های قابل استفاده در مرورگر استفاده می کردیم، برای سایت های CSR هم میتوانیم استفاده کنیم. با این کار تفاوت سرعت لود اولیه CSR نیز با SSR کمتر می شود. در واقع CSR سود بیشتری را از Caching می برد!!!

در CSR تا وقتی نیاز به لود یک ماژول جدید نباشد و یا به زبان ساده تر نیازی به دریافت دیتا از API نداشته باشیم، می توانیم از آن به صورت آفلاین استفاده کنیم. درست مثل یک اپلیکیشن ویندوز. اما در SSR همیشه درخواستی به سمت سرور ارسال می شود حتی برای یک فیلتر ساده. تصویر زیر نشان‌دهنده چگونگی مدیریت مرورگر به هنگام ایجاد درخواست تکراری، برای دریافت یک اسکریپت، cache شده است:

تاثیر caching در روش های مختلف رندر صفحات

همانطور که در تصویر مشاهده می کنید، اسکریپت ها از memory cache و disk cache لود می شوند. این مورد باعث افزایش سرعت بارگذاری و لود صفحات می شود. همچنین باعث می شود که پردازش سمت سرور به شدت کاهش پیدا کند.

تاثیر SEO

موتور‌های جست‌وجو با استفاده از بات هایی به نام crawler، محتوای وبسایت ها را می‌خوانند. برای این بات ها metadata صفحات بیشتر از محتوای متنی آن صفحه اهمیت دارد. بنابراین ارسال صحیح این metadata از اهمیت بالایی برخوردار است.

از آنجایی که در CSR فقط محتوای آن صفحه تغییر می کند، metadata ها ثابت می ماند. اما در SSR چون صفحات به صورت کامل سمت سرور render می شود تمامی این metadata ها نیز تغییر می کنند. بنابراین می توان گفت اگر هدف از طراحی سایت سئو باشد، بهتر است که از SSR استفاده کنیم.

در فریمورک هایی که با CSR کار می کنند کار ما سخت تر است و باید metadata ها را نیز تغییر دهیم. برای این کار در فریمورک React.Js میتوانیم از React Helmet و از کتابخانه angular/browser@ در فریمورک Angular استفاده کنیم.

جمع‌بندی

روش های رندرگیری صفحات وب کاملا بستگی به UX سایت شما دارد. قرار نیست وقتی در CSR فعالیت می کنید (مثل React , Angular)، تمامی سایت ها را با این روش پیاده سازی کنید. بسته به هدفی که از طراحی سایت دارید باید یکی از روش هایی که معرفی کردیم را انتخاب کنید. حتما به این موضوع توجه داشته باشید که سئو سایت امری مهم برای یک سایت تازه راه اندازی شده است.

همچنین میتوانید برای صفحات مختلف از سایت، از روش های متفاوت استفاده نمایید. مثلا برای صفحات اصلی و درباره‌ی ما از SSG استفاده کنید. برای صفحه پرسش و پاسخ از SSR استفاده کنید و برای اپلیکیشن های سایت از CSR استفاده نمایید. یا حتی می توانید کل سایت را با استفاده از ISR طراحی کنید. امیدواریم این مطلب از تیک4 برای شما مفید واقع شده باشد. شما میتوانید سوالات و نظرات خود را در مورد این مقاله در قسمت دیدگاه ها به اشتراک بگذارید.

5/5 - (6 امتیاز)

دیدگاه‌ خود را بیان کنید

اشتراک در
اطلاع از
guest

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
سبد خرید0
There are no products in the cart!