آشنایی کامل با Server Side Rendering یا SSR - مزایا و معایب آن چیست؟

نویسنده: H.Asadi۱۳ آذر ۱۴۰۰

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

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

بیایید با تعریف «رندر» شروع کنیم. رندر فرآیند بازیابی یک صفحه وب، راه اندازی کد، و ارزیابی ساختار و طراحی یک صفحه است. رندرینگ می تواند به روش های مختلفی رخ دهد: سمت کلاینت، سمت سرور و پویا. رندر سمت سرور یا همان SSR فرآیند رندر کردن صفحات وب شما از طریق سرور های سایت شما است. در رندر سمت مشتری (CSR)، این فرآیند از طریق مرورگر کاربر تکمیل می شود. همچنین فرآیند رندر پویا از طریق یک سرور شخص ثالث انجام می شود.

دو نسخه از صفحه وب شما با SSR وجود دارد که شما را مجاب می کند بدانید SSR چیست و چه مشکلاتی به همراه دارد: HTML اولیه و HTML ارائه شده، معروف به DOM (مدل شی مستقیم). گوگل فقط می تواند به HTML ارائه شده دسترسی داشته باشد. این بدان معناست که برای دریافت "اعتبار" از موتور جستجو بسیار مهم است که عناصر و محتواهای کلیدی ارائه شوند.

رندر سمت سرور به معنای تولید HTML برای یک صفحه وب در سمت سرور است.

SSR-در زمان درخواست (request time): رندر سمت سرور ممکن است در زمان درخواست اتفاق بیفتد، در این صورت سرور به صورت پویا HTML را برای هر درخواست URL در زمان اجرا تولید می‌کند. به این رندر سمت سرور پویا نیز گفته می شود.
SSR-در زمان ساخت (build time): متناوباً، HTML برای صفحات وب ممکن است از قبل در سمت سرور در زمان «ساخت» ایجاد شود، و این HTML ایستا زمانی که صفحه وب درخواست می شود از پیش تولید شده به مرورگر بازگردانده می شود. یعنی HTML از قبل تولید شده است و در زمان درخواست تولید نمی شود.

فرآیند Server Side Rendering چگونه است؟

در جواب سوال فرآیند SSR چیست می توان گفت در رندر سمت سرور (SSR) اجزای HTML صفحه وب در سمت سرور تولید می شوند. هنگامی که یک مرورگر یک صفحه وب SSR درخواست می کند، مرورگر یک صفحه وب HTML کاملاً تشکیل شده با اجزای HTML به صورت pre-built دریافت می کند، که چیزی شبیه به این است:

<!DOCTYPE html>
<html>
 <head>
   <title> Web Page Rendered on Server Side </title>
 </head>
<body>
  <h1> This is a Heading   </h1>
  <p>  This is a paragraph </p>
  <div> 
    <p> This is a form </p>
      <form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname">
      </form>
  <div>
</body>
</html>

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

رندر سمت سرور پویا (SSR) یعنی رندر سمت سرور در زمان درخواست، به یک وب سرور در حال اجرا در زمان اجرا نیاز دارد. برای دریافت درخواست های ناوبری، واکشی داده های خارجی (در سمت سرور)، تولید پویا HTML و سپس HTML کامل را به مرورگر بر می گرداند.

وب‌سایت‌هایی که با استفاده از زبان‌های سنتی سمت سرور مانند PHP، ASP.NET (ASP)، جاوا (JSP)، Ruby و غیره ساخته می‌شوند، کاملاً رندر شده سمت سرور هستند.

توجه داشته باشید که مرورگرها فقط HTML، CSS و جاوا اسکریپت را می‌فهمند و زبان‌های سمت سرور (مانند PHP، .NET، Ruby و غیره) اساساً HTML را در سمت سرور تولید می‌کنند و سپس آن HTML را به مرورگر ارسال می‌کنند. بنابراین چه از PHP، چه جاوا یا روبی به عنوان زبان پشتیبان خود استفاده کنید، در SSR همگی HTML ایجاد می کنند که به مرورگر بازگردانده می شود. زبان های سمت سرور معمولاً از برخی چارچوب های وب و قالب های HTML در طول توسعه برای تسهیل تولید HTML در سمت سرور استفاده می کنند.

مطالعه بیشتر

ایجاد سایت وردپرس یا html

SSR استاتیک چیست؟

اگر به دنبال رندر سمت سرور بوده اید، ممکن است با اصطلاح "Static SSR" برخورد کرده باشید. این کمی متفاوت از SSR است زیرا در این بخش، صفحات در زمان ساخته شدن رندر می شوند. برای SSR، این صفحات تنها زمانی ارائه می شوند که توسط یک کاربر (یا ربات) فراخوانی شوند.

SSR ایستا مزایایی در رابطه با زمان اولین بایت (TTFB) و اولین بایت محتوا (FCB) دارد. سرعت سایت برای سئو و تجربه کاربر بسیار مهم است. معایب SSR استاتیک چیست؟ می تواند انعطاف ناپذیر باشد و منجر به هیدراتاسیون شود (فرایند تزریق JS به HTML ایستا از طریق CSR).

مزایای رندر سمت سرور یا SSR

همیشه برای همه گزینه های رندر، مزایا و معایبی وجود خواهد داشت. این به تیم های مهندسی و سئو بستگی دارد که این موارد را بررسی کنند و بر اساس منابع تصمیم بگیرند که کدام مسیر بهترین است. از دیدگاه موتورهای جستجو، رندر سمت سرور دومین گزینه عالی برای رندر JS است.

بزرگترین مزیت این است که صفحات می توانند با سرعت خوبی رندر شوند. هرچه موتور های جستجو سریع‌تر بتوانند صفحات شما را «مشاهده» کنند، سریع‌تر می‌توانند به صفحه بعدی رفته و بودجه خزیدن شما را بهبود بخشند. نه تنها بودجه خزیدن شما بهبود می یابد، بلکه تجربه کاربری شما نیز افزایش می یابد.

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

این بدان معناست که عناصر یا اطلاعات مهم محتوایی ممکن است از دست رفته باشند و Google نمی‌تواند برای این عناصر به شما «اعتبار» بدهد. این یک UX بد برای شما ایجاد می کند. همچنین ممکن است بر توانایی موتورهای جستجو برای رتبه‌بندی صفحاتی که اطلاعات مهمی ندارند تأثیر بگذارد. اما باید به این نکته اشاره کرد که سئو و رتبه بندی بهتر صفحه، از آنجایی که HTML به طور کامل در سمت سرور شکل می گیرد و خزنده های وب راحت تر می توانند صفحات HTML را فهرست کنند، بهبود می یابد.

زمان بارگذاری سریع‌تر برای صفحه اولیه به عنوان یک برنامه CSR ارائه می‌شود، زیرا HTML دریافتی از سرور را می‌توان به سرعت توسط مرورگر تجزیه و بلافاصله نمایش داد و نیازی به دانلود و اجرای یک بسته JS جداگانه برای نمایش صفحه وب ندارد.

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

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

اشکال دیگر SSR این است که نمی تواند جاوا اسکریپت شخص ثالث مانند بررسی ها، UGC، موتورهای توصیه محصول یا هر چیزی که محتوایی را که بخشی از HTML ایستا شما نیست، تزریق کند. این لینک ها و قطعات محتوا وجود نخواهد داشت. این می تواند بر پیوند داخلی یا حتی کیفیت کلی صفحه تأثیر بگذارد. اگر اکثر محتوای شما UGC است که توسط یک سرویس تزریق می شود، برای ربات ها قابل مشاهده نخواهد بود.

نتیجه گیری

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

منابع: searchengineland.com و medium.com

دیدگاهها

۱ دیدگاه

z.m۵ دی ۱۴۰۱

متاسفم بابت این خدمات دهی از وی پی ان معمولی هم سرعتش پایین تر