بله، شما برای یک سایت تجاری و بزرگ که سئو برایش اهمیت دارد، قطعاً به SSR یا دستکم Pre-rendering نیاز دارید.
دلایل فنی و تجربی این موضوع را به بخشهای زیر تقسیم میکنم:
۱. فرآیند دو مرحلهای ایندکس گوگل (The Two-Wave Indexing)
گوگلبات برخلاف صفحات HTML معمولی، صفحات جاوا اسکریپتی را در دو مرحله ایندکس میکند:
- موج اول (First Wave): گوگل صفحه HTML خام را دانلود میکند. در سایتهای SPA، این فایل تقریباً خالی است (فقط یک تگ div id="app" و چند فایل JS). گوگل این نسخه خالی را موقتاً میخواند.
- موج دوم (Second Wave): صفحه در صف رندر (Rendering Queue) قرار میگیرد تا منابع پردازشی آزاد شوند. سپس وبرندر گوگل (WRS) کدهای جاوا اسکریپت را اجرا کرده و محتوا را ایندکس میکند.
- مشکل کجاست؟ این صف رندر ممکن است از چند ساعت تا چند هفته طول بکشد. اگر سایت شما خبری است یا محصولاتی دارید که قیمت و موجودی آنها مدام تغییر میکند، این تأخیر در ایندکس شدن، به شدت به بیزینس شما ضربه میزند.
۲. محدودیت بودجه رندر (Render Budget)
رندر کردن جاوا اسکریپت برای گوگل به شدت از نظر پردازشی گران و هزینهبر است. گوگل برای هر سایت یک «بودجه رندر» محدود در نظر میگیرد. اگر اجرای فایلهای JS شما طول بکشد یا کدهای سنگینی داشته باشید، گوگلبات قبل از اینکه تمام محتوای صفحه شما لود شود، آن را رها میکند (Timeout). نتیجه؟ صفحات شما ناقص یا به صورت کاملاً خالی ایندکس میشوند.
۳. وضعیت سایر موتورهای جستجو و شبکههای اجتماعی
- موتورهای جستجو: موتورهایی مثل Bing در رندر JS بسیار ضعیفتر از گوگل هستند و موتورهایی مثل DuckDuckGo یا Yandex تقریباً اصلاً جاوا اسکریپت را رندر نمیکنند. اگر از این موتورها ورودی میخواهید، CSR گزینه مناسبی نیست.
- شبکههای اجتماعی (Open Graph): رباتهای تلگرام، واتساپ، لینکدین، و توییتر زمان اشتراکگذاری لینک، کدهای JS را اجرا نمیکنند. بنابراین اگر سایت شما SPA معمولی باشد، پیشنمایش کارتها (تصویر شاخص، عنوان و توضیحات متای صفحه) در این پلتفرمها به درستی نشان داده نمیشود.
راهکار پیشنهادی چیست؟
۱. انتقال به Nuxt.js (راهکار اصولی): اگر در ابتدای راه هستید، پروژه Vue خود را به Nuxt.js انتقال دهید تا از مزیت SSR بهرهمند شوید. این کار سرعت لود اولیه (First Contentful Paint) را هم برای کاربر و هم برای گوگل به شدت کاهش میدهد.
۲. استفاده از Pre-rendering (برای سایتهای کوچک/ایستا): اگر صفحات شما پویا نیستند (مثل صفحات درباره ما، تماس با ما، لندینگ پیجها)، میتوانید از ابزارهایی مثل prerender-spa-plugin استفاده کنید تا موقع بیلد گرفتن، نسخههای HTML ایستا تولید شوند.
۳. استفاده از Dynamic Rendering (راهکار موقت): اگر به هیچ وجه امکان تغییر ساختار کد را ندارید، از ابزارهایی مثل Prerender.io استفاده کنید. این ابزارها تشخیص میدهند که کاربر عادی است یا ربات گوگل؛ اگر ربات باشد، نسخه رندر شده (HTML آماده) را به او تحویل میدهند و اگر کاربر عادی باشد، همان SPA را لود میکنند. (البته گوگل این روش را یک راهکار موقت میداند).
