من رفتم سربازی اگر محتوای منو دوست داشتید و بدردتون خورد از من حمایت مالی کنید

مقایسه SSR با CSR

مقایسه SSR با CSR
مقایسه SSR با CSR

مقایسه SSR با CSR

SSR یعنی تمامی المان‌های سایت در سرور رندر شوند و برای ما در قالب فایل‌های آماده و قابل نمایش ارسال می شوند. CSR یعنی تقریبا بیش‌تر المان‌ها سمت کلاینت رندر شوند و عمدتا از تکنولوژی V-Dom استفاده می‌کنند. نکته‌ی جالب اینجاست که SSR در ری اکت اصلا شبیه چیزی که در گذشته سراغ داشتیم مثل WordPress ،Laravel ،Asp.net و …. نیست.

 

مقایسه SSR با CSR

وقتی وب اپلیکیشن ما به صورت CSR یا همان SPA نوشته شود چیزی که crawler گوگل یا موتور‌های جستجوی دیگه خواهند دید تنها یک container از نوع html است که خالی است. دلیل خالی بودن آن چیست؟ چون CSR هر آنچه که لازم است را در صفحه ما load شود را در مرورگر کلاینت ایجاد می‌کند، وقتی کرالر یا همون خزنده برای خواندن مطالب ما می‌آید چیزی جز یک کانتینر خالی نخواهد دید. پس در بخش CSR عملا SEO رو از دست خواهیم داد. ولی این نکته رو هم باید در نظر گرفت همه بخش‌های پروژه ما قرار نیست ssr شود چون ماهیت ری اکت CSR بودن آن می باشد. از این قابلیت باید فقط در جاهایی که نیاز داریم استفاده کنیم. مثلا‌: بلاگ‌، محصولات و … رندر سمت سرور در React توسط node js انجام می‌شود و این فرايند هیچ ارتباطی به بکند پروژه ندارد.

 

مزایا

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

 

معایب

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

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

 

لطفا تجربیات خود را در این زمینه در بخش نظرات برای ما بنویسید.

برای امتیاز به این نوشته کلیک کنید!
[کل: 3 میانگین: 5]