Rehidratación para renderizado del lado del cliente o del lado del servidor
La hidratación, en esencia, no afecta el SEO, pero es un paso esencial para servir 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 haya renderizado en el lado del servidor.
Puede que no importe a los motores de búsqueda, pero es imperativo hacerlo bien si el sitio web ofrece componentes interactivos para los usuarios.
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 contenido inicial (FCP) más rápida y el contenido del lado del cliente se «hidrata» para una pintura de contenido más grande (LCP).
Por lo tanto, el proceso implica capturar el estado actual de la página del lado del cliente o la aplicación serializada por el motor de renderizado, iniciando los componentes de JavaScript en interactividad usando JavaScript cargado o enlazado 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 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 los elementos de una página se inician con el tiempo.
La rehidratación gradual 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 de carga general.
De hecho, los usuarios y los robots y rastreadores de los motores de búsqueda pueden comenzar a ver e interactuar con las páginas tan pronto como se procesa el HTML, incluso antes de que se ejecute el JavaScript.
La rehidratación gradual 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 exactamente, «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 con el contenido presentado por el servidor al cliente. Una vez cargado, 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 en términos de rendimiento y eficiencia de carga.
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 trisomorfa
El renderizado trisomorfo 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 un trabajador de servicio para representar el HTML para que lo utilicen las 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 el 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, esto 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 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 saber 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 según dónde se ejecuta el código y cuándo se ejecuta.
La reanudabilidad puede ser una alternativa a la hidratación y casi puede eliminar la necesidad de ejecutar JavaScript en el inicio 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 envía de vuelta al cliente.
Luego, el cliente reanuda la aplicación desde el momento en que el servidor la serializó; luego, cuando un usuario interactúa con un elemento de página, solo se solicita y ejecuta a pedido ese controlador de eventos.
La posibilidad de embargo y los marcos de embargo no son nuevos. Google usó un marco de recuperación llamado internamente Wiz para productos de búsqueda y fotografía, y eBay usa un marco llamado Marko que agregó la recuperación como una función.
Más recursos:
Imagen destacada: UnderhillStudio/Shutterstock
La entrada Rehidratación para renderizado del lado del cliente o del lado del servidor se publicó primero en Seo Con SEM.
source https://seoconsem.es/2023/06/27/rehidratacion-para-renderizado-del-lado-del-cliente-o-del-lado-del-servidor/
Comentarios
Publicar un comentario