درباره SSR یا Server Side Rendering و تاثیر آن بر سئو وبسایت چه می دانید ؟

با پیشرفت تکنولوژی های روز برنامه نویسی و به خصوص طراحی سایت،امروزه شاهد گسترش و تولد فریم وورک ها و ابزارهای متعددی برای توسعه وبسایت ها هستیم که در کنار مزیت های بسیار زیاد همچون توسعه آسان، راحتی در کدنویسی تیمی و … مشکلاتی را نیز به همراه داشته اند که ما در این مقاله قصد اشاره به ایراداتی را داریم که این ابزار ها برای سئو و بهینه سازی وبسایت ها ایجاد میکنند و راه حل این مشکل (Server Side Rendering یا SSR) را توضیح خواهیم داد.

برای مثال فریم وورک هایی مانند ReactJ ،Vuejs و Angularjs که امروزه در بسیاری از اپلیکیشن های وب (web application) در حال استفاده هستند و هر روزه به محبوبیت آن ها نیز اضافه میشود.

برای درک مشکل بیایید کتابخانه Reactjs را بررسی کنیم،وقتی ما کد خروجی وبسایت های ساخته شده با Reactjs را بررسی کنیم (به وسیله کلیک کردن بر View page source) شاهد این کدها هستیم:

همان طور که مشاهده میکنید محتوایی داخل صفحه دیده نمیشود و در تگ body که باید دارای content و تگ های html باشد تنها دارای یک div با آی دی root است و محتوای صفحه پس از لود جاوا اسکریپت در صفحه قرار میگیرد و نکته همین جاست! بدون لود جاوا اسکریپت عملا کاربر قادر نخواهد بود محتوای وبسایت را ببیند و همین طور موتور جستجوی گوگل نیز اگر نتواند به خوبی جاوا اسکریپت را اجرا کند نمیتواند محتوای وبسایت را اصطلاحا index کند،و حالا سوال اینجاست،آیا گوگل و دیگر موتورهای جستجو قادر هستند محتوای این دست از وبسایت ها را مشاهده کنند؟

با مطالعه این جمله کمی موضوع روشن تر میشود:

Sometimes the JavaScript may be too complex or arcane for us to execute, in which case we can’t render the page fully and accurately.

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

بنابراین با توجه به نوشته بالا گوگل همیشه قادر نخواهد بود محتوای چنین وبسایت هایی را درک کند و حتی در صورت ترجمه کدهای جاوا اسکریپت به دلیل پردازش سنگین این وبسایت ها در سمت مرورگر کاربر سرعت لود آن از نظر گوگل پایین می آید که موجب کاهش رتبه آن و در نتیجه به هدر رفتن زحمات سئو داخلی خواهد شد (با بررسی های انجام شده سایر موتور های جستجو نیز به خوبی قادر نیستند محتوای وبسایت های client-side rendering را دریافت کنند)، اگر میخواهید بدانید گوگل وبسایت شما را به چه صورت میبیند به وسیله Google search console و ابزار Url Inspection به خوبی قادر خواهید بود از اشکالات احتمالی مطلع گردید.

از دیگر معایب این فریم وورک ها این است که در صورتی که کاربر از مرورگر ها و دستگاه های قدیمی برای مشاهده این وبسایت ها استفاده کند ممکن است با کندی سرعت و یا عدم پشتیبانی برخی امکانات و کدهای جاوا اسکریپتی مواجه شود که بسیار فاکتور منفی برای سئو وبسایت محسوب میشود (طبق بررسی های انجام شده در صورتی که سرعت لود سایت بالاتر از حد معمول باشد بیش از 60 درصد کاربران وبسایت شما را ترک خواهند کرد که باعث کاهش session duration و به تبع آن کاهش رتبه شما در گوگل خواهد شد)

راه حل این مشکل چیست؟ برای رفع این مشکل دو راه حل وجود دارد، pre-rendering و یا SSR که موضوع مورد بحث این مقاله میباشد و به pre-rendering در مقاله ای جداگانه پرداخته خواهد شد.

SSR یا server-side-rendering چیست؟

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

در این روش پس از رندر کدهای جاوا اسکریپت به وسیله سرور و ارسال آن به کاربر،وبسایت دارای محتوا به کاربر نشان داده میشود و بنابراین مشکلی که در بالا به آن اشاره شد وجود نخواهد داشت و بدون شک موتور های جستجو به راحتی قادرند محتوا را index نمایند برای درک بهتر این وبسایت را مشاهده نمایید.

برای SSR و اعمال آن فریم وورک های کمکی دیگری نیز به وجود آمده اند. برای مثال برای Reactjs میتوانید از Nextjs ، razzle و یا gatsby و برای vuejs از Nuxtjs استفاده کنید که دارای مستندات جامعی نیز میباشند،اما باید در نظر داشته باشید که برای استفاده از این فریم وورک ها و به طور کلی SSR نمیتوانید از هاست های اشتراکی استفاده کنید و بهتر است با تهیه یک سرور مجازی (vps) وبسایت خود را بارگزاری نمایید.

مزایای server-side-rendering

1- Server Side Rendering باعث افزایش سرعت وبسایت میشود و بنابراین تجربه کاربری را بهبود میبخشد.

2- نقش بسیار مهمی در سئو وبسایت ها ایجاد میکند و علاوه بر سرعت بیشتر که برای سئو بسیار موثر میباشد موجب ایندکس صحیح صفحات نیز میشود.

3- زمانی که اینترنت کاربر ضعیف میباشد به لود سایت کمک بسیاری میکند.

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

و از معایب آن میتوان به پیچیدگی های پیاده سازی آن اشاره کرد که البته با وجود فریم وورک های اشاره شده در بالا مانند Nextjs این پیچیدگی ها تا حد ممکن کاهش پیدا کرده است.

نکته: در صورتی که از روش SSR برای لود صفحات استفاده کردید حتما برای تجربه سرعت بالاتر از روش های کش سمت سرور استفاده کنید تا کاربران لذت مشاهده صفحات SPA (تک صفحه ای) را بیش از پیش احساس کنند!

نتیجه گیری

بسیاری از توسعه دهندگان و برنامه نویسان وب گمان میکنند گوگل قادر است همه نوع وبسایتی را دریافت و index کند و این موضوعات بر سئو وبسایت آن ها تاثیری ندارد، در صورتی که باید کمی واقع بین باشیم! وبسایت های بسیار کمی هستند که از client-side rendering (ترجمه سایت سمت مرورگر کاربر) استفاده کرده اند و اکنون رتبه خوبی دارند. بنابراین اگر سئو و رتبه وبسایتتان اهمیت دارد حتما از SSR استفاده کنید و مطمئن باشید پیچیدگی های احتمالی آن ارزش رتبه سایت شما را دارد.

برای انجام خدمات بهینه سازی و سئو سایت، هم چنین پیاده سازی SSR می توانید با تیم تخصصی وب تب در ارتباط باشید.