محمدصالح کریمی
محمدصالح کریمی
خواندن ۲ دقیقه·۴ سال پیش

مقایسه ی SSR با CSR

مقایسه ی SSR با CSR


اول اینکه SSR یعنی تمامی المان های سایت در سرور رندر شوند و برای ما در قالب فایل های آماده و قابل نمایش ارسال می شوند.
دوم اینکه CSR یعنی تقریبا بیشتر المان ها سمت کلاینت رندر شوند و عمدتا از تکنولوژی V-Dom استفاده می کنند.

نکته ی جالب اینجاست که SSR در ری اکت اصلا شبیه چیزی که در گذشته سراغ داشتیم مثل Wordpress , Laravel,Asp.net و …. نیست.

و حالا بیشتر درباره ی مفهوم اصلی SSR بررسی می کنیم.

وقتی وب اپلیکیشن ما به صورت CSR یا همان SPA نوشته شود چیزی که crawler گوگل یا موتور های جستجوی دیگه خواهند دید تنها یک container از نوع html  است که خالی می باشد.

چرا خالی؟؟

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

پس در بخش CSR عملا SEO رو از دست خواهیم داد.

ولی این نکته رو هم باید در نظر گرفت همه بخش های پروژه ما قرار نیست ssr شود چون ماهیت ری اکت CSR بودن آن می باشد.

از این قابلیت باید فقط در جاهایی که نیاز داریم استفاده کنیم.

مثلا : بلاگ ، محصولات و …

رندر سمت سرور در React  توسط Node Js انجام می شود و این فرایند هیچ ارتباطی به بک اند پروژه ندارد (بک اند می تواند هر چیزی باشد که کاملا بک اند و فرانت اند مستقل از هم هستند و فقط در مواقع نیاز باهم ارتباط می گیرند)

مزیت ها

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

معایب

  • پیاده سازی نسبتا سختی دارد.
  • کند شدن زمان Response اتفاق می افتد.

شاید سوال بشه که حالا باید با این موارد که گفته شد از آن استفاده کنیم یا خیر؟؟ به نظرم فقط در جایی که نیاز به سئو داریم باید استفاده کنیم ولی جاهای دیگری لزومی به استفاده ندارید.


کانال ما : ری‌اکت سورس

react jsssrcsrnext jsseo
برنامه نویس و توسعه دهنده وب | جاوا اسکریپت
شاید از این پست‌ها خوشتان بیاید