آبرسانی مجدد برای رندر سمت مشتری یا سمت سرور

Rehydration یا به عبارت ساده تر “هیدراتاسیون” اصطلاحی است که اغلب با نگاهی به SPA ها و رندر سمت سرور مطرح می شود.

هیدراتاسیون در اصل بر SEO تأثیر نمی گذارد، اما یک مرحله ضروری برای ارائه صفحات رندر شده به کاربر است.

انواع مختلفی از هیدراتاسیون وجود دارد که می توان از آنها استفاده کرد.

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

آبرسانی مجدد چیست؟

به زبان ساده، rehydration به یک برنامه وب یا صفحه اجازه می دهد تا پس از رندر شدن در سمت سرور، به حالت تعاملی خود برسد.

این ممکن است برای موتورهای جستجو اهمیتی نداشته باشد، اما اگر وب‌سایت مؤلفه‌های رندر شده و تعاملی را به کاربران ارائه می‌کند، باید درست انجام شود.

این فرآیند در برنامه‌های تک صفحه‌ای (SPA) در کنار رندر سمت سرور استفاده می‌شود، که اجازه می‌دهد اولین رنگ محتوا (FCP) سریع‌تر انجام شود، و محتوای سمت کلاینت برای بزرگ‌ترین رنگ محتوایی (LCP) “هیدراته” می‌شود.

بنابراین، این فرآیند شامل گرفتن وضعیت فعلی صفحه یا برنامه در سمت سرویس گیرنده است که توسط رندر سریال شده است، و اجزای جاوا اسکریپت را به صورت تعاملی با استفاده از جاوا اسکریپت بارگذاری شده یا پیوند داده شده در پاسخ HTML راه اندازی می کند.

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

این می تواند منجر به نتایج بهتر Core Web Vital شود و ذاتاً به تلاش کمتری از Googlebot برای ارائه صفحه وب نیاز دارد. علاوه بر این، موتورهای جستجو می‌توانند صفحات را سریع‌تر ایندکس کنند، زیرا لازم نیست از طریق WRS (سرویس ارائه وب) گوگل عبور کند.

آبرسانی پیشرونده توضیح داده شده است

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

آبرسانی پیشرونده اجازه می دهد تا اجزای جاوا اسکریپت اساساً بارگذاری شوند، جایی که گره ها در طول زمان هیدراته می شوند نه همه گره ها به طور همزمان.

این اجازه می دهد تا اجزایی که ممکن است ضروری نباشند بعداً مقداردهی اولیه شوند و کل زمان بارگذاری کوتاه تر شود.

در واقع، هم کاربران و هم ربات‌های موتور جستجو و خزنده‌ها می‌توانند به محض رندر شدن HTML صفحات را ببینند و با آن‌ها تعامل برقرار کنند – حتی قبل از اجرای جاوا اسکریپت.

آبرسانی پیشرونده همچنین به جلوگیری از مشکلات رایج SSR کمک می کند، مانند جایی که درخت مدل شیء سند (DOM) رندر شده توسط سرور از بین می رود و بلافاصله دوباره ساخته می شود.

آبرسانی جزئی چیست؟

شکل دیگری از آبرسانی مجدد، آبرسانی جزئی، امکان هیدراتاسیون انتخابی اجزای جاوا اسکریپت – یا به طور خاص تر، “جزایر” – را بدون نیاز به هیدراته کردن همه اجزا فراهم می کند.

این تکنیک هر دو SSR و CSR را ترکیب می کند.

در این سناریو، سرور یک سند HTML اولیه را در کنار محتوای ارائه شده توسط سرور برای مشتری ارسال می کند. پس از بارگیری، جاوا اسکریپت سمت کلاینت DOM را برای افزودن یا به روز رسانی محتوای موجود در “جزایر” مشخص شده راه اندازی و دستکاری می کند.

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

آبگیری جزئی به عنوان یک تکنیک قدرتمند برای بهینه سازی عملکرد SPAها برای بارگذاری عملکرد و کارایی دیده می شود.

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

نگاهی به رندر تریزومورفیک

رندر تریزومورفیک در جوامع توسعه و سئو فنی کمتر رایج است.

این فرآیند شامل رندر کردن SPAها در سمت سرور و کلاینت و همچنین در یک سرویس دهنده برای رندر HTML برای استفاده از ناوبری است.

این فرآیند از ترکیبی از رندر سمت سرور استریم استفاده می‌کند که پیمایش‌های اولیه را ارائه می‌کند و کارگر سرویس HTML را برای ناوبری ارائه می‌کند. پخش جریانی سمت سرور تضمین می کند که محتوای لازم به موتورهای جستجو ارسال می شود.

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

چه زمانی بهتر است از آبرسانی مجدد استفاده کنیم؟

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

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

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

Resumability می‌تواند جایگزینی برای هیدراتاسیون باشد و تقریباً می‌تواند نیاز به اجرای جاوا اسکریپت را با شروع صفحه برطرف کند – یعنی برنامه‌های تقریباً «فوری» در مقابل فرآیند هیدراتاسیون.

هنگامی که مشتری درخواستی را به سرور ارسال می کند، سرور ابتدا برنامه را بازسازی می کند و آن را به صورت سریالی به HTML تبدیل می کند. سپس HTML به مشتری بازگردانده می شود.

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

قابلیت ازسرگیری، و چارچوب های قابل ازسرگیری، جدید نیستند. گوگل از یک چارچوب قابل تجدید به‌نام Wiz برای محصولات جستجو و عکس‌ها استفاده کرده است و eBay از چارچوبی به نام Marko استفاده می‌کند که قابلیت ازسرگیری را به عنوان یک ویژگی اضافه کرده است.

منابع بیشتر:

تصویر ویژه: UnderhilStudio/Shutterstock