Rehidratación para renderizado del lado del cliente o del lado del servidor

La rehidratación, o simplemente «hidratación», es un término que surge a menudo cuando se analizan los SPA y la representación del servidor.

La hidratación no afecta esencialmente al SEO, pero es un paso esencial en la entrega de páginas renderizadas al usuario.

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

Diferentes pilas y marcos de tecnología ya pueden admitir 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 haya renderizado en el lado del servidor.

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

Este proceso se utiliza en aplicaciones de una sola página (SPA) junto con la representación del lado del servidor, lo que permite una pintura de primer contenido (FCP) más rápida, mientras que el contenido del lado del cliente se «hidrata» para una pintura de contenido superior (LCP).

Luego, el proceso implica obtener el estado actual de la página o la aplicación del lado del cliente, serializado por el renderizador, lanzando los componentes JavaScript de interactividad usando JavaScript cargado o asociado con 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 sus páginas más rápido porque no tienen 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 activan con el tiempo.

La rehidratación progresiva esencialmente permite que los componentes de JavaScript se carguen de forma lenta, donde los nodos se hidratan con el tiempo en lugar de que todos los nodos se hidraten al mismo tiempo.

Esto permite que los componentes que pueden no ser esenciales se inicialicen más tarde, lo que reduce el tiempo de carga general.

De hecho, los usuarios, los bots y los rastreadores de 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 DOM (Modelo de objeto del documento) 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 JavaScript o, más concretamente, «islas» sin tener que hidratar todos los componentes.

La técnica combina SSR y CSR.

En este escenario, el servidor envía un documento HTML inicial al cliente junto con el contenido que muestra el servidor. Una vez cargado, el JavaScript del lado del cliente inicializa y manipula el DOM para agregar o actualizar el contenido existente en las «islas» especificadas.

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

La rehidratación parcial es vista como una técnica poderosa para optimizar el rendimiento de los spas para el rendimiento y la eficiencia de la carga.

Dicho esto, tiene sus problemas, ya que puede presentar problemas 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 representar el SPA en los lados del servidor y del cliente, así como un trabajador de servicio para representar el HTML que se usará para las navegaciones.

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

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

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

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

Elegir una hidratación en particular requiere saber cómo funciona su pila tecnológica y qué funciona mejor para su sitio.

También hay alternativas a la hidratación, como la reproducción, que difieren según dónde se ejecuta el código y cuándo se ejecuta.

La reanudación puede ser una alternativa a la hidratación y casi puede eliminar la necesidad de ejecutar JavaScript en la carga de la página, lo que significa aplicaciones casi «instantáneas» en comparación con 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 donde el servidor la serializó; por lo tanto, cuando un usuario interactúa con un elemento de página, solo se invoca y ejecuta ese controlador de eventos a pedido.

La reproducción y los marcos de reproducción no son nuevos. Google ha utilizado internamente un marco de reproducción llamado Wiz para la búsqueda de productos y fotos, mientras que eBay usa un marco llamado Marko, que ha agregado la reproducción como una función.

Otros recursos:

---

Imagen destacada: UnderhilStudio/Shutterstock