Volver al horario

React ️: Rebaja el coste de la hidratación , mejora la performance ⚡ y mantén a los crawlers contentos 🤖

-
Salón de actos
avatar de Miguel Angel Durán

Miguel Angel Durán

arquitecto frontend en Adevinta Spain

Descripción

¡Qué rápido es React renderizando elementos! Pero... ¿Es lo suficientemente rápido? ¿Qué pasa cuando tenemos una lista de elementos? Si React sólo tarda 15ms en pintar un elemento y tenemos 100 elementos... eso es ¡un segundo y medio! Renderizar nuestra aplicación completamente en el cliente no es tan rápido como pensamos. Si hacemos Server-Side rendering, podemos conseguir mejoras de performance además de un mejor soporte para los crawlers pero viene con un precio a pagar: lo que ya viene renderizado del servidor hay que volver a montarlo en el cliente. A esto se le llama hidratación y no es precisamente gratis ya que impacta muy negativamente en el tiempo que necesita nuestro sitio para ser interactivo. ¿Cómo podríamos evitar esto? En esta charla te contaré sobre las estrategias de Dynamic Rendering, Static Content y Progressive Hydration que hemos seguido en Adevinta para lograr minimizar el impacto de la hidratación, mejorando la performance pero manteniendo el soporte a los crawlers. También hablaremos de las limitaciones de cada estrategia y cómo implementarlas en tu sitio con React, para que tú también puedas mejorar la experiencia de tu usuario.

react javascript server-side-rendering seo performance client-side rendering