آیا استفاده از SSR برای داشتن SEO بهتر در وب اپلیکیشن ها تنها راه ممکنه؟

این مطلب به درد کی میخوره ؟
اگه یه برنامه نویس وب و به خصوص فرانت اند هستی یا تخصصت SEO هست این مطلب میتونه برات مفید باشه

خب بیاید از اینجا شروع کنیم که اصلا SSR چیه ؟
SSR مخفف عبارت Server Side Rendering هست، یعنی چی ؟ خیلی ساده اگه بخوام توضیح بدم یعنی محتوای صفحه شما ( html ای که قراره روی مرورگر کاربر نمایش داده بشه ) روی سرور تولید بشه و به کاربر تحویل داده بشه.
شاید براتون سوال پیش بیاد مگه توی وب اپلیکیشن هایی که از SSR استفاده نمی‌کنن چه اتفاقی می‌افته ؟
زمانی که از SSR استفاده نمیشه، کد های جاوا اسکریپت اپلیکیشن روی کامپیوتر کاربر اجرا میشه و خروجی‌ای رو تولید میکنه و روی مرورگر کاربر به نمایش می‌ذاره.باحاله نه ؟ چون اینجوری دیگه به جای اینکه منابع زیادی از سرور شما استفاده بشه تا محتوایی که می‌خواید به هر کاربر نمایش بدین تولید بشه صرفا از منابع ( رم، پردازشگر و ... ) کامپیوتر کاربراتون استفاده می‌کنید و کلی هزینه هاتون کم میشه و کارتون با سرور های خیلی ارزون تری راه میوفته

اما مشکل این داستان چیه ؟

مهم ترین مشکلی که ممکنه توی وب اپلیکیشن هایی که از Client side rendering استفاده می‌کنن اینه که اگه یه اپلیکیشنی، مرورگری یا رباتی که از جاوا اسکریپت پشتیبانی نمی‌کنه بخواد سایت شمارو ببینه یا crawl کنه ( مثلا ربات‌های موتور‌های جستجو ) به مشکل می‌خوره چون محتوای شما برای تولید شدن نیاز به این دارن که کد جاوا اسکریپت روی کامپیوتر کاربر اجرا بشه.به عنوان مثال وقتی گوگل می‌خواد صفحات وبسایت شماره ببینه و index بکنتشون صرفا صفحات خالی ای رو میبینه که این میتونه به SEO وبسایت شما آسیب بزنه.
حالا یکی از راه های پیش رو استفاده از SSR و تولید شدن محتوای صفحاتتون سمت سرور و ارسال html ایجاد شده به کاربره

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

زمانی که تنها دلیل استفاده شما از SSR این باشه که بات ها و کراولر ها بتونن وبسایت شما رو ببینن به نظر من این کار اشتباهه چون اینجوری تمام کاربرای عادیتون هم برای دیدن وبسایت شما از این روش استفاده میکنن و این میتونه فشار خیلی زیادی برای سرور های شما ایجاد کنه و هزینه های شما رو چند برابر کنه.
علاوه بر این تصور کنید که یه وب اپلیکیشنی رو توسعه دادین و به اتمام رسوندینش و حالا احساس می‌کنید برای اینکه SEO بهتری داشته باشین نیاز دارین که از SSR استفاده کنید و مجبور می‌شین که کلی از کدهاتون رو تغییر بدین و کلی هم زمان از دست بدین که این اصلا خوب نیست

راه حل جایگزین چیه ؟

اما اگه راهی باشه که کاربرهای عادیتون مثل سابق بتونن سایت رو بدون استفاده از SSR ببینن اما محتوای صفحات شما قبل از نمایش به کراولر ها و ربات ها تولید بشه چی ؟

اول این سوال پیش میاد که اصن چطوری بفهمیم که کی الان داره وبسایت مارو می‌بینه ؟ آیا یه کراولره یا یه کاربر عادی با گوگل کروم ؟
این کار واقعا سادس، صرفا کافیه که با هدر HTTP ای به اسم USER_AGENT آشنا باشید، در واقع این هدر توی هر درخواست HTTP ای ارسال میشه و مشخص می‌کنه چه ابزاری داره سعی می‌کنه با وبسایت شما ارتباط برقرار کنه، پس کافیه لیست USER_AGENT بات ها و کراولر های مختلف رو بدونیم، برخی از معروف ترین ها و پر استفاده ترین هاشون اینان :

googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp

حالا مرحله بعدی اینه که درخواست‌های که از سمت این لیست از USER_AGENT ها میاد رو جدا کنیم و به یه شکلی محتوای مورد نیازشون رو خودمون سمت سرور تولید کنید و بعد بهشون html تولید شده رو فقط نشون بدیم.بدون هیچ کد جاوا اسکریپتی.
حالا سوال سخت تر اینجاس که چطوری باید این کارو انجام بدیم ؟

زمانی که اولین بار این همچین فکری به ذهنم رسید پیش خودم گفتم قطعا افراد دیگه ای هم بودن به این موضوع قبلا فکر کرده باشن پس شروع کردم به سرچ کردن تا رسیدم به یه پروژه ای به اسم Rendertron که اتفاقا تیم خود Google Chrome دارن روش کار می‌کنن

کار این پروژه چیه ؟ دقیقا همون چیزی که ما نیاز داریم، یه سرویسیه که می‌تونید به وسیله اون هر زمان که یه بات می‌خواست وبسایت شما رو ببینه محتوای وبسایتتون رو اول سمت سرور تولید کنید و بعد html تولید شده رو بدین به اون بات اما در عین حال بقیه یوزر هاتون بدون اینکه هیچ فشاری به سرورهاتون بیارن همچنان از Client side rendering استفاده کنن

اسم این روش چیه ؟

یکمی که بیشتر تحقیق کردم متوجه شدم که اسم این روش Dynamic Rendering هست و استفاده از Rendertron تنها راه حل موجود نیست و راههای دیگه ای هم برای این کار وجود داره
مثلا اگه فک می‌کنید که استفاده و راه اندازی از Rendertron براتون سخت و زمان گیره می‌تونید از سرویس وبسایتی استفاده کنید که کارش همینه و با هزینه خیلی معقولی ( حتی رایگان برای سایتهایی که تعداد صفحات کمی دارن ) و با کمترین میزان کد زدن بهتون اجازه میده همین کار رو بکنید : Prerender.io


امیدوارم که تونسته باشم به ساده ترین شکل ممکنه همه چیزو بگم و کمکی بهتون کرده باشم
موفق باشید :)