Hidratación progresiva con hidratación selectiva

La hidratación selectiva es una funcionalidad de React 18 que permite a React comenzar a hidratar los componentes en cuanto llega su código JavaScript, sin esperar a que se descargue el JavaScript de toda la página. Cada sección dividida mediante code splitting independiente se hidrata cuando se carga su bundle, no toda a la vez.

Antes de React 18, la hidratación era «todo o nada»: React tenía que descargar todo el JavaScript e hidratar el árbol completo antes de que cualquier parte de la página se volviera interactiva. React 18 elimina esta limitación: distintas partes del árbol se hidratan de forma independiente a medida que su código y sus datos están disponibles.

Si el usuario hace clic o interactúa con un límite de Suspense que todavía no se ha hidratado, React da inmediatamente prioridad a la hidratación de ese subárbol antes que a cualquier otro trabajo de hidratación pendiente. Esto significa que el elemento que el usuario intenta utilizar se vuelve interactivo primero, aunque no aparezca en el orden del documento.

La combinación de React.lazy con importaciones dinámicas y límites de Suspense permite la hidratación selectiva de componentes cuyo código se ha dividido. El navegador descarga primero el bundle principal de JS e hidrata el shell de inmediato. Cada componente cargado de forma diferida se hidrata cuando se descarga su fragmento, de manera progresiva, a medida que el navegador lo obtiene.

Como resultado, el contenido visible inicialmente se vuelve interactivo antes de que se haya descargado siquiera el JavaScript del contenido fuera de la vista inicial. El usuario puede interactuar con la navegación y la llamada a la acción del hero mientras el feed de comentarios y el widget de recomendaciones todavía cargan sus fragmentos de JavaScript.

La hidratación selectiva reduce el Total Blocking Time (TBT), la métrica clave del rendimiento de la hidratación. En la pestaña Performance de Chrome DevTools, las Long Tasks (tareas de más de 50 ms) se resaltan en rojo. Antes de la hidratación selectiva, podría observar una única Long Task de 300 ms correspondiente a toda la hidratación; después, observará varias tareas pequeñas distribuidas a lo largo del tiempo.

El antipatrón que perjudica la hidratación selectiva consiste en importar todos los componentes al inicio de la aplicación: import Footer from './Footer'. Esto obliga al navegador a descargar, analizar y ejecutar el código de Footer antes de que comience cualquier hidratación. Sustituya las importaciones de nivel superior de los componentes fuera de la vista inicial por React.lazy e importaciones dinámicas.

Utilice const Footer = React.lazy(() => import('./Footer')) para los componentes que aparecen fuera de la vista inicial. Envuélvalos en Suspense con un fallback sencillo. El navegador reduce la prioridad de la descarga del bundle de Footer hasta que termina la hidratación del contenido visible inicialmente, lo que mejora de forma natural el TBT.

El streaming y la hidratación selectiva son técnicas complementarias: el streaming envía fragmentos de HTML para mejorar FCP y LCP, mientras que la hidratación selectiva procesa fragmentos de JavaScript para mejorar TTI y TBT. Juntas abordan las dos dimensiones del rendimiento: «mostrar el contenido rápidamente» y «hacerlo interactivo rápidamente».

React Server Components llevan la hidratación selectiva un paso más allá: los componentes de servidor no producen JavaScript para el cliente. Solo es necesario hidratar los componentes de cliente (marcados con "use client"). Esto reduce la cantidad total de JavaScript que debe hidratarse y hace que la hidratación selectiva sea aún más eficaz.

Un patrón práctico consiste en utilizar renderToPipeableStream para transmitir el HTML, envolver la página en una llamada raíz a hydrateRoot (en lugar de createRoot) para activar el modo de hidratación, utilizar React.lazy para todas las secciones fuera de la vista inicial y envolver cada sección en un límite de Suspense. React se encarga automáticamente del resto.

¿Cómo afecta la interacción del usuario a la prioridad de la hidratación selectiva en React 18?

La hidratación selectiva permite que React hidrate progresivamente los subárboles de componentes a medida que llega su JavaScript, en lugar de esperar al bundle completo. Las interacciones del usuario priorizan la hidratación del subárbol seleccionado. React.lazy e importaciones dinámicas para el contenido fuera de la vista inicial, combinadas con límites de Suspense, permiten este patrón progresivo. La hidratación selectiva y el SSR mediante streaming son técnicas complementarias que, juntas, abordan tanto la entrega de contenido como el rendimiento de la interactividad.