La rehidratación, o más simplemente ‘hidratación’, es un término que surge a menudo cuando observamos los SPA y la representación del lado del servidor.

La hidratación, en esencia, no afecta al SEO, pero es un paso esencial para mostrar las páginas renderizadas al usuario.

Hay diferentes tipos de hidratación que se pueden utilizar.

Es posible que diferentes pilas y marcos tecnológicos ya admitan diferentes tipos de hidratación.

¿Qué es la rehidratación?

En pocas palabras, la rehidratación permite que una aplicación o página web alcance su estado interactivo después de que se represente en el lado del servidor.

Esto puede no importar a los motores de búsqueda, pero es imperativo hacerlo bien si el sitio web ofrece componentes interactivos renderizados a los usuarios.

Este proceso se usa en aplicaciones de una sola página (SPA) junto con la representación del lado del servidor, lo que permite una primera pintura con contenido (FCP) más rápida, y el contenido del lado del cliente se “hidrata” para la pintura con contenido más grande (LCP).

El proceso, por lo tanto, implica capturar el estado actual de la página o aplicación en el lado del cliente serializado por el renderizador, iniciando los componentes de JavaScript en interactividad usando JavaScript cargado o vinculado en la respuesta HTML.

Como término general, hidratación, en este caso, significa que todos los componentes de la página web se inicializan.

Esto puede conducir a mejores resultados de Core Web Vital e inherentemente requiere menos esfuerzo por parte de Googlebot para representar la página web. Además, los motores de búsqueda pueden indexar páginas más rápido, ya que esto no tiene que pasar por el WRS (servicio de representación web) de Google.

Explicación de la rehidratación progresiva

La rehidratación progresiva optimiza la representación y la interactividad de los componentes individuales e implica tanto la representación del lado del servidor como la representación del lado del cliente (CSR) a medida que las partes de una página se inician con el tiempo.

La rehidratación progresiva permite que los componentes de JavaScript se carguen esencialmente de forma diferida, donde los nodos se hidratan con el tiempo en lugar de que todos los nodos se hidraten a la vez.

Esto permite que los componentes que podrían no ser esenciales se inicialicen más tarde, lo que reduce el tiempo total de carga.

De hecho, tanto los usuarios como los bots y rastreadores de los motores de búsqueda pueden comenzar a ver e interactuar con las páginas tan pronto como se procesa HTML, incluso antes de que se ejecute JavaScript.

La rehidratación progresiva también ayuda a evitar las trampas comunes de SSR, como cuando un árbol del modelo de objeto de documento (DOM) generado por el servidor se destruye y se reconstruye de inmediato.

¿Qué es la rehidratación parcial?

Otra forma de rehidratación, la rehidratación parcial, permite la hidratación selectiva de componentes de JavaScript, o, más específicamente, ‘islas’, sin tener que hidratar todos los componentes.

La técnica combina SSR y CSR.

En este escenario, el servidor envía al cliente un documento HTML inicial junto con el contenido generado por el servidor. Una vez cargado, el JavaScript del lado del cliente inicia y manipula el DOM para agregar o actualizar contenido existente en ‘islas’ específicas.

Esto significa que JavaScript actualiza selectivamente partes de la página en lugar de la totalidad.

La rehidratación parcial se considera una técnica poderosa para optimizar el rendimiento de los SPA para cargar el rendimiento y la eficiencia.

Dicho esto, tiene sus problemas, ya que puede presentar desafíos para el almacenamiento en caché y la navegación del lado del cliente.

Una mirada a la representación trisomórfica

La representación trisomórfica es menos común en las comunidades de desarrollo y SEO técnico.

El proceso implica la representación de SPA en los lados del servidor y del cliente, así como en un trabajador de servicio para representar HTML para el uso de navegaciones.

El proceso utiliza una combinación de representación del lado del servidor de transmisión, que representa las navegaciones iniciales, y el trabajador del servicio representa HTML para las navegaciones. La representación del lado del servidor de transmisión garantiza que el contenido necesario se envíe a los motores de búsqueda.

En el mundo del desarrollo, significa que los componentes y plantillas almacenados en caché se pueden mantener actualizados y que se pueden habilitar navegaciones de estilo SPA para generar nuevas vistas en la misma sesión.

¿Cuándo es mejor usar la rehidratación?

La rehidratación es una necesidad para los sitios web que deben ser altamente interactivos, como las aplicaciones de una sola página, porque permite tiempos de carga iniciales más rápidos y una experiencia de usuario mejorada.

Elegir un tipo específico de hidratación requiere conocimiento de cómo funciona su pila tecnológica y qué funciona mejor para su sitio web.

También hay alternativas a la hidratación, como la capacidad de reanudación, que difiere en dónde se ejecuta el código y cuándo se ejecuta.

La capacidad de reanudación puede ser una alternativa a la hidratación y casi puede eliminar la necesidad de ejecutar JavaScript cuando se inicia la página, lo que significa aplicaciones casi “instantáneas” en lugar de un proceso de hidratación.

Cuando el cliente envía una solicitud al servidor, el servidor primero reconstruye la aplicación y la serializa en HTML. Luego, el HTML se devuelve al cliente.

Luego, el cliente reanuda la aplicación desde el punto en que el servidor la serializó; luego, cuando un usuario interactúa con un elemento de la página, solo se solicita y ejecuta a pedido ese controlador de eventos.

La capacidad de reanudación y los marcos reanudables no son nuevos. Google ha utilizado un marco reanudable llamado internamente Wiz para productos de búsqueda y fotos, y eBay usa un marco llamado Marko que ha agregado la capacidad de reanudación como una característica.

Más recursos:

Imagen destacada: UnderhilStudio/Shutterstock