رندرینگ SSR و CSR چیست + راهنمای جامع

هنگامی که یک کاربر یک صفحه وب را باز می‌کند، در واقع درخواستی به سرور ارسال می‌شود تا محتوای موردنظر دریافت و نمایش داده شود. این فرآیند که به آن رندرینگ صفحه گفته می‌شود، نقش مهمی در سرعت بارگذاری، تجربه کاربری و بهینه‌سازی سایت برای موتورهای جستجو (SEO) دارد. هرچه صفحه سریع‌تر رندر شود، کاربران تجربه بهتری خواهند داشت و موتورهای جستجو نیز راحت‌تر آن را ایندکس خواهند کرد.

به‌طور کلی، دو روش اصلی برای رندر صفحات وب وجود دارد که هرکدام تأثیرات متفاوتی بر نحوه بارگذاری و عملکرد سایت دارند. این دو روش شامل رندرینگ سمت سرور (SSR) و رندرینگ سمت کاربر (CSR) است. انتخاب بین این دو روش به عواملی مانند نوع وب‌سایت، نیازهای سئو، حجم تعاملات صفحه و منابع سرور بستگی دارد. در این مقاله، این دو روش به‌طور کامل بررسی شده و مزایا، معایب و تأثیر آن‌ها بر عملکرد سایت تحلیل می‌شود.

مراحل رندر، کرال و ایندکس یک صفحه

هنگامی که صفحه‌ای ایجاد یا به‌روزرسانی می‌شود، گوگل و سایر موتورهای جستجو از طریق ربات‌های خود (مانند Googlebot) آن را کرال (Crawl) می‌کنند. این ربات‌ها ابتدا کد HTML صفحه را دریافت کرده و سپس فرآیند پردازش و رندرینگ محتوا را انجام می‌دهند. در این مرحله، ساختار صفحه بررسی شده، فایل‌های مرتبط مانند استایل‌ها و اسکریپت‌ها پردازش می‌شوند و نسخه‌ای قابل‌فهم از صفحه برای ایندکس شدن آماده می‌گردد.

پس از کرال، مرحله ایندکس شدن (Indexing) آغاز می‌شود. در این فرآیند، گوگل محتوای پردازش‌شده را در پایگاه داده خود ذخیره کرده و روابط میان متون، تصاویر، لینک‌ها و سایر عناصر صفحه را تحلیل می‌کند. اگر صفحه‌ای به‌درستی پردازش و رندر نشود، اطلاعات آن به‌طور کامل در اختیار موتور جستجو قرار نمی‌گیرد و در نتیجه، در نتایج جستجو ظاهر نخواهد شد یا رتبه مطلوبی نخواهد داشت. بنابراین مراحل خواندن یک صفحه توسط گوگل را می‌توان به صورت زیر دانست:

1. درخواست صفحه: مرورگر کاربر درخواست HTTP را به سرور ارسال می‌کند.
2. دریافت و پاسخ سرور: سرور پاسخ مناسب را با داده‌های HTML، CSS و JavaScript ارسال می‌کند.
3. رندرینگ اولیه: مرورگر محتوای صفحه را پردازش کرده و نمایش می‌دهد.
4. کرال شدن توسط موتور جستجو: موتورهای جستجو صفحه را بررسی و پردازش می‌کنند.
5. ایندکس شدن: اطلاعات صفحه در پایگاه داده موتور جستجو ذخیره می‌شود تا در نتایج جستجو نمایش داده شود.

انواع رندرینگ صفحات وب

رندرینگ صفحات وب به فرآیندی گفته می‌شود که در آن کدهای HTML ،CSS و جاوا اسکریپت پردازش شده و صفحه‌ای قابل‌نمایش برای کاربر ایجاد می‌شود. این فرآیند شامل دریافت داده‌ها، اجرای اسکریپت‌ها، اعمال استایل‌ها و نمایش نهایی صفحه در مرورگر است. نحوه انجام این مراحل تأثیر مستقیمی بر سرعت بارگذاری، تجربه کاربری و قابلیت ایندکس شدن محتوا توسط موتورهای جستجو دارد. این رندرینگ می‌تواند در دو مکان اصلی انجام شود:

1. سمت سرور (SSR)

2. سمت کاربر (CSR)

رندرینگ سمت سرور (SSR) چیست؟

در Server-Side Rendering (SSR)، به جای اینکه کل فرآیند رندرینگ در سمت کلاینت (مرورگر) انجام شود، کدهای جاوااسکریپت و محتوای صفحه در سرور پردازش و تولید می‌شوند. این فرآیند باعث می‌شود که HTML نهایی به صورت کامل و بدون نیاز به پردازش اضافی در مرورگر به کاربر ارسال شود. یکی از بزرگترین مزایای این رویکرد، افزایش سرعت بارگذاری اولیه صفحات است. زیرا کاربران بدون نیاز به منتظر ماندن برای بارگذاری کامل جاوااسکریپت، می‌توانند محتوای صفحه را بلافاصله مشاهده کنند.

این موضوع به خصوص برای موتورهای جستجو اهمیت زیادی دارد. چرا که موتورهای جستجو برای ایندکس کردن صفحات به محتوای HTML تکیه می‌کنند. در روش SSR، محتوای صفحه به صورت کامل در HTML اولیه قرار دارد و موتورهای جستجو می‌توانند آن را به راحتی خوانده و ایندکس کنند، که باعث بهبود SEO (بهینه‌سازی موتور جستجو) سایت می‌شود.

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

مزایای رندرینگ سمت سرور (SSR)

• سرعت بارگذاری اولیه سریع‌تر
• بهینه‌سازی بهتر برای موتورهای جستجو
• عملکرد بهتر در دستگاه‌های ضعیف‌تر

معایب رندرینگ سمت سرور (SSR)

• بار پردازشی بالاتر بر روی سرور
• افزایش زمان پاسخگویی در برخی موارد
• پیچیدگی پیاده‌سازی در مقایسه با CSR

رندرینگ سمت کاربر (CSR) چیست؟

در Client-Side Rendering (CSR)، تمام پردازش‌های مربوط به رندر صفحه در مرورگر کاربر انجام می‌شود. در این روش، ابتدا یک صفحه HTML تقریبا خالی دریافت شده و سپس، JavaScript اجرا شده و محتوای نهایی صفحه تولید می‌شود. این فرآیند معمولا با کمک فریمورک‌هایی مانند React، Vue.js و Angular انجام می‌شود که از Virtual DOM و به‌روزرسانی‌های پویا برای بهینه‌سازی نمایش محتوا استفاده می‌کنند.

مزایای رندرینگ سمت کاربر (CSR)

• تجربه کاربری روان‌تر در صفحات تعاملی
• کاهش بار سرور
• بهینه برای اپلیکیشن‌های تک صفحه‌ای (SPA)

معایب رندرینگ سمت کاربر (CSR)

• سرعت بارگذاری اولیه پایین‌تر
• دشواری در ایندکس شدن صفحات توسط موتورهای جستجو
• افزایش مصرف منابع در دستگاه کاربر

سایت های وردپرسی CSR هستن یا SSR؟

سایت‌های وردپرسی به طور پیش‌فرض از رندرینگ سمت سرور (SSR) استفاده می‌کنند، به این معنا که صفحات وب در سرور تولید می‌شوند و سپس به صورت HTML کامل و آماده به مرورگر کاربر ارسال می‌گردند. این روش باعث می‌شود که کاربران در زمان کوتاه‌تری محتوا را مشاهده کنند و موتورهای جستجو نیز به راحتی محتوای صفحه را ایندکس کنند، چرا که محتوای اولیه صفحه در زمان بارگذاری کاملا در دسترس است. با این حال، با توجه به افزونه‌ها، تم‌ها و تنظیمات خاص، ممکن است برخی عناصر یا بخش‌های سایت به سمت رندرینگ سمت کلاینت (CSR) حرکت کنند.

چه زبان‌های برنامه‌نویسی CSR هستند؟

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

• React.js
• Vue.js
• Angular
• Svelte

ارتباط رندرینگ با Core Web Vitals و معیارهای گوگل

Core Web Vitals مجموعه‌ای از معیارهای گوگل است که تجربه کاربری یک صفحه را از نظر سرعت، تعامل و پایداری بصری ارزیابی می‌کند. این معیارها به طور خاص بر روی جنبه‌های کلیدی تمرکز دارند که می‌توانند تأثیر زیادی بر تجربه کاربران در هنگام بازدید از صفحات وب داشته باشند. از جمله این معیارها می‌توان به Largest Contentful Paint (LCP)، First Input Delay (FID) و Cumulative Layout Shift (CLS) اشاره کرد. روش رندرینگ صفحه (SSR یا CSR) تأثیر مستقیمی بر این معیارها دارد:

Largest Contentful Paint (LCP)

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

First Input Delay (FID)

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

Cumulative Layout Shift (CLS)

CLS، یک معیار است که برای ارزیابی پایداری بصری یک صفحه وب در حین بارگذاری استفاده می‌شود. در روش SSR، محتوای از پیش رندر شده از همان ابتدا بارگذاری می‌گردد. اما در CSR، بارگذاری تدریجی ممکن است منجر به جابه‌جایی‌های ناگهانی و افزایش مدت زمان CLS گردد.

چگونه CSR را به SSR تبدیل کنیم؟

گاهی اوقات، به دلایل مختلفی مانند نیاز به بهبود سئو و عملکرد، یک سایت باید از روش Client-Side Rendering (CSR) به Server-Side Rendering (SSR) تغییر مسیر دهد. در واقع، این تغییر می‌تواند در مواقعی که سایت نیاز به بارگذاری سریع‌تر، ایندکسینگ بهتر توسط موتورهای جستجو و تجربه کاربری بهینه‌تری دارد، ضروری باشد.

تبدیل از CSR به SSR نیازمند تغییرات معماری در وب‌سایت است و ممکن است نیاز به منابع بیشتر سروری داشته باشید. با این حال در بسیاری از مواقع، این تغییر برای سایت‌هایی که به دنبال بهبود سئو و عملکرد هستند، می‌تواند یک گام مهم در جهت بهینه‌سازی باشد. این کار معمولا از طریق روش‌های زیر انجام می‌شود:

استفاده از Next.js (هم برای React.js و هم برای Vue.js)

این فریمورک قابلیت SSR را به پروژه‌های React اضافه می‌کند و به توسعه‌دهندگان این امکان را می‌دهد که صفحات خود را در سرور رندر کرده و سپس نتیجه را به مرورگر ارسال کنند. Next.js با فراهم کردن ابزارهای آسان و قدرتمند به توسعه‌دهندگان کمک می‌کند تا به راحتی از ویژگی‌های SSR بهره‌مند شوند.

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

استفاده از فریمورک‌های مبتنی بر SSR

فریم‌ورک‌هایی مانند مانند Remix یا Sapper برای Svelte طراحی شده‌اند و با استفاده از SSR به توسعه‌دهندگان کمک می‌کنند که برنامه‌های وب داینامیک و پیچیده را با عملکرد بالا و سئو بهینه ایجاد کنند. استفاده از این فریمورک‌ها باعث می‌شود که سایت‌ها نه تنها از نظر سرعت و عملکرد بهبود یابند بلکه برای موتورهای جستجو به راحتی ایندکس شوند و در نتایج جستجو جایگاه بهتری پیدا کنند.

Pre-rendering

Pre-rendering یا پیش‌پردازش رندرینگ به فرآیند تولید فایل‌های HTML استاتیک در زمان ساخت (build time) گفته می‌شود. در این روش، قبل از اینکه کاربر درخواست صفحه‌ای را ارسال کند، محتوای آن صفحه به‌طور کامل در زمان ساخت پروژه تولید می‌شود و در قالب فایل‌های HTML استاتیک ذخیره می‌شود. سپس این فایل‌ها به صورت مستقیم از سرور یا CDN برای کاربر ارسال می‌شود.

Hybrid Rendering

Hybrid Rendering یا رندرینگ هیبریدی به روشی اطلاق می‌شود که در آن ترکیبی از دو روش رندرینگ مختلف مانند Server-Side Rendering (SSR) و Static Site Generation (SSG) برای تولید صفحات وب استفاده می‌شود. این رویکرد به توسعه‌دهندگان این امکان را می‌دهد که بسته به نیاز هر صفحه، روش مناسب‌تری را برای رندر آن انتخاب کنند و در نتیجه، عملکرد بهتری برای کل سایت به دست آورند.

چگونه بفهمیم یک سایت از SSR استفاده می‌کند یا CSR؟

برای تشخیص نوع رندرینگ یک سایت، روش‌های زیر می‌توانند مفید باشند:

1. نمایش سورس صفحه (View Page Source): اگر محتوای صفحه در HTML موجود باشد، سایت از SSR استفاده کرده است. در غیر این صورت، احتمالا از CSR استفاده می‌شود.
2. غیرفعال کردن JavaScript: اگر با غیرفعال کردن JavaScript محتوای صفحه نمایش داده نشود، سایت از CSR استفاده می‌کند.
3. بررسی DevTools مرورگر: در تب Network، اگر درخواست اولیه یک سند HTML کامل برگرداند، سایت از SSR استفاده می‌کند.
4. استفاده از افزونه‌های کروم مختص این کار از جمله aitdk: یکی از افزونه‌های تخصصی برای تشخیص نوع رندرینگ سایت در کروم، افزونه aitdk است. این افزونه می‌تواند بررسی کند که آیا یک سایت از Server-Side Rendering (SSR) یا Client-Side Rendering (CSR) استفاده می‌کند.

پیشرفت گوگل در تشخیص صفحات CSR

گوگل در تشخیص و ایندکس کردن صفحات CSR (Client-Side Rendering) پیشرفت‌های قابل توجهی داشته است. در گذشته، یکی از مشکلات اصلی این بود که گوگل قادر به اجرای کامل JavaScript و بارگذاری محتوای داینامیک صفحات CSR نبود. این باعث می‌شد که محتوای بارگذاری شده به وسیله JavaScript به درستی شناسایی نشود و صفحات به طور کامل ایندکس نشوند. اما طی سال‌های اخیر، گوگل با بهبود الگوریتم‌ها و توانایی‌های خزنده‌های خود در اجرای جاوااسکریپت، توانسته است به شکل موثری محتوای تولید شده در صفحات CSR را شبیه‌سازی کرده و ایندکس کند.

با این حال پیشنهاد می‌شود که برای بهینه‌سازی بیشتر، از روش‌های SSR ،Pre-rendering یا dynamic rendering استفاده شود تا گوگل تمام محتوای صفحه را به درستی ایندکس کند.

روش‌های ترکیبی برای بهینه‌سازی رندرینگ

برخی سایت‌ها از روش‌های ترکیبی برای بهینه‌سازی عملکرد و سئو استفاده می‌کنند. از جمله:

• ISR (Incremental Static Regeneration)

در این روش، صفحات استاتیک به‌صورت پویا و در پس‌زمینه به‌روزرسانی می‌شوند؛ بدون نیاز به بازسازی کامل سایت. این تکنیک که در Next.js پشتیبانی می‌شود و به بهبود سرعت و قابلیت به‌روزرسانی صفحات کمک می‌کند.

ترکیبی از SSR و Static Site Generation (SSG) که در Next.js پشتیبانی می‌شود.

• Hydration

ابتدا محتوای صفحه توسط SSR بارگذاری شده و سپس JavaScript تعاملات را مدیریت می‌کند.

• Streaming Rendering

محتوای صفحه به‌جای ارسال یکباره، به‌صورت مرحله‌ای و جریانی به مرورگر فرستاده می‌شود. این روش که در React Server Components و Next.js 13 دیده می‌شود، باعث کاهش زمان نمایش اولین محتوای مهم (LCP) می‌شود.

سفارش خدمات سئو و طراحی سایت

مشاوره رایگان