Регидратация или, проще говоря, «гидратация» — это термин, который часто появляется, когда мы рассматриваем SPA и рендеринг на стороне сервера.
Гидратация, по сути, не влияет на SEO, но является важным шагом для предоставления пользователю визуализированных страниц.
Можно использовать различные типы гидратации.
Различные технологические стеки и фреймворки уже могут поддерживать разные типы гидратации.
Содержание
Что такое регидратация?
Проще говоря, регидратация позволяет веб-приложению или странице перейти в интерактивное состояние после того, как оно будет отображено на стороне сервера.
Это может не иметь значения для поисковых систем, но необходимо сделать все правильно, если веб-сайт предоставляет пользователям визуализированные интерактивные компоненты.
Этот процесс используется в одностраничных приложениях (SPA) наряду с рендерингом на стороне сервера, что позволяет быстрее выполнить первую отрисовку по содержанию (FCP), а содержимое на стороне клиента «увлажняется» для самой большой отрисовки по содержанию (LCP).
Таким образом, этот процесс включает в себя захват текущего состояния страницы или приложения на стороне клиента, сериализуемого средством визуализации, загрузку компонентов JavaScript в интерактивном режиме с использованием загруженного JavaScript или ссылки на него в ответе HTML.
В качестве всеобъемлющего термина гидратация в данном случае означает, что все компоненты на веб-странице инициализированы.
Это может привести к лучшим результатам Core Web Vital и, по сути, требует меньше усилий от Googlebot для отображения веб-страницы. Более того, поисковые системы могут индексировать страницы быстрее, поскольку им не нужно проходить через WRS (службу веб-рендеринга) Google.
Объяснение прогрессивной регидратации
Прогрессивная регидратация оптимизирует рендеринг и интерактивность отдельных компонентов и включает как рендеринг на стороне сервера, так и рендеринг на стороне клиента (CSR) по мере того, как части страницы загружаются с течением времени.
Прогрессивная регидратация позволяет компонентам JavaScript по существу загружаться лениво, когда узлы увлажняются с течением времени, а не все узлы одновременно.
Это позволяет инициализировать компоненты, которые могут быть ненужными, позже, что сокращает общее время загрузки.
На самом деле, как пользователи, так и поисковые роботы и поисковые роботы могут начать видеть страницы и взаимодействовать со страницами сразу после отображения HTML — даже до выполнения JavaScript.
Прогрессивная регидратация также помогает избежать распространенных ловушек SSR, например, когда дерево объектной модели документа (DOM), визуализируемое сервером, разрушается и немедленно перестраивается.
Что такое частичная регидратация?
Другая форма регидратации, частичная регидратация, позволяет выборочно гидратировать компоненты JavaScript — или, точнее, «острова» — без необходимости гидратации всех компонентов.
Этот метод сочетает в себе как SSR, так и CSR.
В этом случае сервер отправляет исходный HTML-документ вместе с содержимым, отображаемым на сервере, клиенту. После загрузки клиентский JavaScript инициирует DOM и манипулирует им, добавляя или обновляя существующий контент на указанных «островках».
Это означает, что JavaScript выборочно обновляет части страницы, а не всю.
Частичная регидратация рассматривается как мощный метод для оптимизации производительности СПА для повышения производительности и эффективности.
Тем не менее, у него есть свои проблемы, поскольку он может создавать проблемы для кэширования и навигации на стороне клиента.
Взгляд на трисоморфный рендеринг
Трисоморфный рендеринг менее распространен как среди разработчиков, так и среди технических SEO-сообществ.
Этот процесс включает в себя рендеринг SPA на стороне сервера и клиента, а также на сервис-воркере для рендеринга HTML для использования навигации.
В процессе используется сочетание потокового рендеринга на стороне сервера, который отображает первоначальные переходы, а сервис-воркер визуализирует HTML для переходов. Потоковая обработка на стороне сервера обеспечивает отправку необходимого контента в поисковые системы.
В мире разработки это означает, что кэшированные компоненты и шаблоны могут поддерживаться в актуальном состоянии, а навигация в стиле SPA для рендеринга новых представлений в одном и том же сеансе может быть включена.
Когда лучше всего использовать регидратацию?
Регидратация необходима для веб-сайтов, которые должны быть высокоинтерактивными, например, для одностраничных приложений, потому что она позволяет ускорить начальную загрузку и улучшить взаимодействие с пользователем.
Выбор определенного типа гидратации требует знания того, как работает ваш технологический стек и что лучше всего подходит для вашего сайта.
Существуют также альтернативы гидратации, такие как возобновляемость, которая зависит от того, где и когда выполняется код.
Возобновляемость может быть альтернативой гидратации и может почти устранить необходимость выполнения JavaScript при запуске страницы, что означает почти «мгновенные» приложения по сравнению с процессом гидратации.
Когда клиент отправляет запрос на сервер, сервер сначала перестраивает приложение и сериализует его в HTML. Затем HTML возвращается клиенту.
Затем клиент возобновляет работу приложения с того момента, когда сервер сериализовал его; затем, когда пользователь взаимодействует с элементом страницы, запрашивается и выполняется только этот обработчик событий.
Возобновляемость и возобновляемые фреймворки не новы. Google использовал возобновляемую структуру под названием Wiz для продуктов поиска и фотографий, а eBay использует инфраструктуру под названием Marko, которая добавила возобновляемость в качестве функции.
Дополнительные ресурсы:
Рекомендуемое изображение: UnderhilStudio/Shutterstock
