رندر یعنی تبدیل داده و کد به صفحه‌ای که کاربر می‌بیند. در رندر سمت سرور (SSR) این کار پیش از رسیدن به مرورگر روی سرور انجام میشود و مرورگر یک HTML آماده و کامل دریافت میکند. در مقابل، در رندر سمت کاربر، مرورگر ابتدا یک صفحه‌ی تقریباً خالی و جاوااسکریپت می‌گیرد و خودش محتوا را می‌سازد.
مثال ملموس#
فرض کنید یک صفحه‌ی محصول دارید. در SSR وقتی کاربر یا ربات گوگل آدرس را باز میکند، همان لحظه عنوان، قیمت و توضیح محصول در HTML اولیه وجود دارد. در رندر سمت کاربر، ابتدا صفحه‌ی خالی نمایش داده میشود و بعد از اجرای جاوااسکریپت محتوا ظاهر میشود.
مزایا#
- نمایش سریعتر اولین محتوا، به‌خصوص روی گوشی‌های ضعیف و اینترنت کند
- دیده شدن مطمئنتر محتوا برای موتورهای جستجو و ابزارهای پیش‌نمایش لینک در پیام‌رسان‌ها
- مصرف کمتر منابع در دستگاه کاربر
هزینه‌ها#
- بار بیشتری روی سرور می‌افتد، چون هر درخواست باید رندر شود
- پیچیدگی پیاده‌سازی و استقرار بیشتر میشود
- باید با کش درست، سرعت پاسخ را بالا نگه داشت
کجا با آن روبه‌رو می‌شوید#
وردپرس و بیشتر سایت‌های PHP ذاتاً سمت سرور هستند. در دنیای جاوااسکریپت، فریم‌ورک‌هایی مثل Next.js و Nuxt قابلیت SSR را برای اپهای React و Vue فراهم می‌کنند.
تفاوت با سایت استاتیک#
در سایت استاتیک، HTML از قبل ساخته و ذخیره شده است. در SSR صفحه هنگام درخواست ساخته میشود و می‌تواند به کاربر یا داده‌ی لحظه‌ای وابسته باشد.