سمت مشتری در مقابل. رندر سمت سرور

زمان بارگذاری سریع‌تر صفحه وب، نقش مهمی در تجربه کاربر و سئو دارد، با سرعت بارگذاری صفحه یک عامل تعیین‌کننده کلیدی برای الگوریتم گوگل.

یک توسعه دهنده وب فرانت اند باید بهترین راه را برای ارائه یک وب سایت انتخاب کند تا تجربه ای سریع و محتوای پویا ارائه دهد.

دو روش رندر معروف عبارتند از رندر سمت مشتری (CSR) و رندر سمت سرور (SSR).

همه وب سایت ها نیازهای متفاوتی دارند، بنابراین درک تفاوت بین رندر سمت مشتری و سمت سرور می تواند به شما کمک کند تا وب سایت خود را مطابق با اهداف تجاری خود ارائه دهید.

گوگل و جاوا اسکریپت

Google مستندات گسترده‌ای در مورد نحوه مدیریت جاوا اسکریپت دارد، و Googlers به ​​طور منظم به سوالات جاوا اسکریپت از طریق فرمت‌های مختلف – رسمی و غیر رسمی – اطلاعات بینش ارائه می‌دهند و به آنها پاسخ می‌دهند.

به عنوان مثال، در یک پادکست Search Off The Record، این بحث مطرح شد که Google همه صفحات را برای جستجو، از جمله صفحات سنگین جاوا اسکریپت، رندر می کند.

این موضوع باعث ایجاد یک گفتگوی اساسی در لینکدین شد، و چند نکته دیگر از بحث پادکست و ادامه آن عبارتند از:

• گوگل قیمت رندر صفحات خاص را ردیابی نمی کند.
• گوگل همه صفحات را برای دیدن محتوا رندر می کند – صرف نظر از اینکه از جاوا اسکریپت استفاده می کند یا خیر.

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

نظر کامل مارتین اسپلیت در لینکدین که این موضوع را پوشش می دهد این بود:

“ما ردیابی “این صفحه برای ما چقدر گران بود؟” یا چیزی می دانیم که بخش قابل توجهی از وب از جاوا اسکریپت برای افزودن، حذف، تغییر محتوا در صفحات وب استفاده می کند. ما فقط باید رندر کنیم تا همه چیز را ببینیم. واقعاً مهم نیست که یک صفحه از جاوا اسکریپت استفاده می کند یا نه، زیرا ما فقط پس از رندر شدن می توانیم مطمئن باشیم که همه محتوا را می بینیم.

مارتین همچنین صف و تاخیر احتمالی بین خزیدن و نمایه‌سازی را تأیید کرد، اما نه فقط به این دلیل که چیزی جاوا اسکریپت است یا نه، و اینکه وجود جاوا اسکریپت دلیل اصلی ایندکس نشدن URL‌ها است، موضوعی «مبهم» نیست.

بهترین روش های عمومی جاوا اسکریپت

قبل از اینکه وارد بحث سمت سرویس گیرنده در مقابل بحث سمت سرور شویم، مهم است که بهترین شیوه های کلی را برای هر یک از این رویکردها برای کار کردن دنبال کنیم:

• منابع جاوا اسکریپت را از طریق Robots.txt یا قوانین سرور مسدود نکنید.
• از مسدود کردن رندر خودداری کنید.
• از تزریق جاوا اسکریپت در DOM خودداری کنید.

رندر سمت مشتری چیست و چگونه کار می کند؟

رندر سمت مشتری یک رویکرد نسبتاً جدید برای رندر کردن وب سایت ها است.

زمانی که کتابخانه‌های جاوا اسکریپت شروع به ادغام آن کردند، محبوب شد، با Angular و React.js برخی از بهترین نمونه‌های کتابخانه‌های مورد استفاده در این نوع رندرینگ.

این با ارائه جاوا اسکریپت یک وب سایت در مرورگر شما به جای روی سرور کار می کند.

سرور به جای اینکه تمام محتوا را از سند HTML دریافت کند، با یک سند HTML کاملاً حاوی فایل‌های JS پاسخ می‌دهد.

در حالی که زمان آپلود اولیه کمی کند است، بارگیری صفحات بعدی سریع خواهد بود زیرا به یک صفحه HTML متفاوت در هر مسیر وابسته نیستند.

از مدیریت منطق گرفته تا بازیابی داده ها از یک API، سایت های رندر شده توسط مشتری همه کارها را «مستقل» انجام می دهند. صفحه پس از اجرای کد در دسترس است زیرا هر صفحه ای که کاربر بازدید می کند و URL مربوط به آن به صورت پویا ایجاد می شود.

فرآیند CSR به شرح زیر است:

• کاربر URL مورد نظر خود را در نوار آدرس وارد می کند.
• یک درخواست داده به سرور در URL مشخص شده ارسال می شود.
• در اولین درخواست مشتری برای سایت، سرور فایل های ثابت (CSS و HTML) را به مرورگر مشتری تحویل می دهد.
• مرورگر مشتری ابتدا محتوای HTML و سپس جاوا اسکریپت را دانلود می کند. این فایل‌های HTML جاوا اسکریپت را به هم متصل می‌کنند و فرآیند بارگیری را با نمایش نمادهای بارگیری که توسعه‌دهنده برای کاربر تعریف می‌کند، آغاز می‌کنند. در این مرحله هنوز وب سایت برای کاربر قابل مشاهده نیست.
• پس از دانلود جاوا اسکریپت، محتوا به صورت پویا در مرورگر مشتری تولید می شود.
• محتوای وب با حرکت مشتری و تعامل با وب سایت قابل مشاهده می شود.

رندر سمت سرور چیست و چگونه کار می کند؟

رندر سمت سرور تکنیک رایج‌تری برای نمایش اطلاعات روی صفحه است.

مرورگر وب درخواستی را برای اطلاعات از سرور ارسال می کند، داده های خاص کاربر را برای پر کردن واکشی می کند و یک صفحه HTML کاملاً رندر شده را برای مشتری ارسال می کند.

هر بار که کاربر از صفحه جدیدی در سایت بازدید می کند، سرور کل فرآیند را تکرار می کند.

در اینجا نحوه انجام فرآیند SSR گام به گام آمده است:

• کاربر URL مورد نظر خود را در نوار آدرس وارد می کند.
• سرور یک پاسخ HTML آماده ارائه به مرورگر ارائه می دهد.
• مرورگر صفحه را رندر می کند (اکنون قابل مشاهده است) و جاوا اسکریپت را دانلود می کند.
• مرورگر React را اجرا می کند، بنابراین صفحه را قابل تعامل می کند.

تفاوت بین رندر سمت مشتری و سمت سرور چیست؟

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

این به رندر سمت سرور مزیت سرعت نسبت به رندر سمت سرویس گیرنده می دهد، زیرا مرورگر نیازی به پردازش فایل های جاوا اسکریپت بزرگ ندارد. محتوا اغلب در عرض چند میلی ثانیه قابل مشاهده است.

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

با این حال، رندر سمت مشتری گزینه ارزان تری برای صاحبان وب سایت است.

بار روی سرورهای شما را کاهش می دهد و مسئولیت رندر را به مشتری (ربات یا کاربر در تلاش برای مشاهده صفحه شما) می سپارد. همچنین با ارائه تعامل سریع وب سایت پس از بارگذاری اولیه، تعاملات سایت غنی را ارائه می دهد.

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

SSR همچنین می‌تواند تحت یک بار بالای سرور، در صورتی که سرور درخواست‌های همزمان زیادی از کاربران مختلف دریافت کند، کمانش کند.

اشکال CSR طولانی تر بودن زمان بارگذاری اولیه است. این می تواند بر سئو تاثیر بگذارد. خزنده ها ممکن است منتظر بارگیری محتوا و خروج از سایت نباشند.

این رویکرد دو مرحله ای امکان مشاهده محتوای خالی در صفحه شما را با از دست دادن محتوای جاوا اسکریپت پس از خزیدن و فهرست کردن HTML یک صفحه افزایش می دهد. به یاد داشته باشید که در بیشتر موارد، CSR به یک کتابخانه خارجی نیاز دارد.

زمان استفاده از رندر سمت سرور

اگر می خواهید دید گوگل خود را بهبود ببخشید و در صفحات نتایج موتورهای جستجو (SERPs) رتبه بالایی کسب کنید، رندر سمت سرور انتخاب شماره یک است.

وب سایت های آموزش الکترونیکی، بازارهای آنلاین و برنامه های کاربردی با رابط کاربری ساده با صفحات، ویژگی ها و داده های پویا کمتر، همگی از این نوع رندر بهره می برند.

زمان استفاده از رندر سمت مشتری

رندر سمت مشتری معمولاً با برنامه های وب پویا مانند شبکه های اجتماعی یا پیام رسان های آنلاین جفت می شود. این به این دلیل است که اطلاعات این برنامه‌ها دائماً تغییر می‌کند و باید با داده‌های بزرگ و پویا سروکار داشته باشد تا به‌روزرسانی‌های سریع انجام شود تا نیاز کاربران را برآورده کند.

تمرکز در اینجا بر روی یک سایت غنی با کاربران زیادی است که تجربه کاربر را بر سئو اولویت می‌دهد.

کدام بهتر است: رندر سمت سرور یا سمت مشتری؟

هنگام تعیین اینکه کدام رویکرد بهترین است، نه تنها نیازهای سئوی خود را در نظر بگیرید، بلکه باید نحوه عملکرد وب سایت برای کاربران و ارائه ارزش را نیز در نظر بگیرید.

در مورد پروژه خود و اینکه چگونه رندر انتخابی شما بر موقعیت شما در SERP ها و تجربه کاربری وب سایت شما تأثیر می گذارد فکر کنید.

به طور کلی، CSR برای وب سایت های پویا بهتر است، در حالی که SSR برای وب سایت های ایستا مناسب است.

فرکانس بازخوانی محتوا

وب‌سایت‌هایی که دارای اطلاعات بسیار پویا هستند، مانند وب‌سایت‌های قمار یا فارکس، محتوای خود را هر ثانیه به‌روزرسانی می‌کنند، به این معنی که در این سناریو احتمالاً CSR را به SSR انتخاب می‌کنید – یا بسته به نوع خود، استفاده از CSR را برای صفحات فرود خاص و نه برای همه صفحات انتخاب می‌کنید. استراتژی جذب کاربر

SSR اگر محتوای سایت شما به تعامل کاربر زیادی نیاز نداشته باشد موثرتر است. این به طور مثبت بر دسترسی، زمان بارگذاری صفحه، سئو و پشتیبانی رسانه های اجتماعی تأثیر می گذارد.

از سوی دیگر، CSR برای ارائه رندر مقرون به صرفه برای برنامه های کاربردی وب عالی است و ساخت و نگهداری آن آسان تر است. برای تاخیر ورودی اول (FID) بهتر است.

یکی دیگر از ملاحظات CSR این است که متا تگ ها (توضیح، عنوان)، URL های متعارف، و تگ های Hreflang باید در سمت سرور رندر شوند یا در پاسخ HTML اولیه ارائه شوند تا خزنده ها در اسرع وقت آنها را شناسایی کنند، و نه تنها در رندر ظاهر شوند. HTML.

ملاحظات پلتفرم

نگهداری فناوری CSR گران‌تر است، زیرا نرخ ساعتی برای توسعه‌دهندگان ماهر در React.js یا Node.js معمولاً بالاتر از برنامه‌نویسان PHP یا WordPress است.

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

برای کسانی که به راه اندازی وردپرس بدون هد فکر می کنند، مانند استفاده از Frontity، مهم است که توجه داشته باشید که هم باید توسعه دهندگان React.js و هم توسعه دهندگان PHP را استخدام کنید.

این به این دلیل است که وردپرس بدون هد برای قسمت جلویی به React.js متکی است در حالی که برای قسمت پشتی همچنان به PHP نیاز دارد.

مهم است که به یاد داشته باشید که همه افزونه‌های وردپرس با تنظیمات هدلس سازگار نیستند، که می‌تواند عملکرد را محدود کند یا نیاز به توسعه سفارشی اضافی داشته باشد.

کارکرد و هدف وب سایت

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

به عنوان مثال، در یک بازار آنلاین، صفحات با توضیحات محصول را می توان بر روی سرور ارائه کرد، زیرا آنها ثابت هستند و باید به راحتی توسط موتورهای جستجو فهرست شوند.

با حفظ تجارت الکترونیک، اگر سطوح بالایی از شخصی‌سازی برای کاربران در تعدادی از صفحات دارید، نمی‌توانید SSR محتوا را برای ربات‌ها رندر کنید، بنابراین باید نوعی محتوای پیش‌فرض را برای Googlebot تعریف کنید که بدون کوکی می‌خزد و می‌خزد. بی تابعیت

صفحاتی مانند حساب های کاربری نیازی به رتبه بندی در صفحات نتایج موتورهای جستجو (SERPs) ندارند، بنابراین رویکرد CRS ممکن است برای UX بهتر باشد.

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

منابع بیشتر:

---

تصویر ویژه: تیپاپت/Shutterstock