Límites de Suspense y prioridad del streaming

Los límites de Suspense son la unidad fundamental de granularidad del streaming. Cada límite de Suspense del árbol de componentes crea una sección que se puede transmitir de forma independiente; React puede resolver y transmitir cada límite a su propio ritmo, sin depender de los demás.

El shell está compuesto por todo lo que queda fuera de los límites de Suspense: el diseño, la navegación, el pie de página y cualquier contenido disponible de forma síncrona. El shell se transmite primero y rápidamente, lo que proporciona a los usuarios la estructura de la página de inmediato mientras las secciones que dependen de datos se cargan en segundo plano.

Cuando React transmite el shell, cualquier límite de Suspense cuyos datos aún no estén disponibles se renderiza con su interfaz de fallback, normalmente un esqueleto o indicador de carga. Este fallback se incluye en la respuesta HTML inicial, por lo que el usuario ve un indicador de carga de inmediato en lugar de un espacio en blanco.

Cuando se resuelven los datos de un límite de Suspense, React transmite el HTML resuelto junto con un pequeño script inline. Ese script mueve el contenido recién transmitido desde un elemento template oculto hasta la posición correcta del DOM y sustituye el fallback sin recargar toda la página.

React utiliza el patrón del elemento template de HTML: el contenido resuelto de Suspense se transmite a un template oculto y, después, un script llama a una función interna de React para intercambiar el contenido del template en la posición correcta del DOM. Esto permite manipular el DOM para realizar el reemplazo sin depender de un framework de JavaScript.

Los límites de Suspense anidados tienen líneas de tiempo de resolución independientes. Un límite de Suspense interno puede resolverse antes que su límite externo; React transmite el contenido interno en cuanto está listo, independientemente de si el límite externo se ha resuelto. Esto maximiza el paralelismo en la carga de datos.

Una colocación eficaz de Suspense sitúa los componentes lentos que dependen de datos dentro de límites de Suspense, y el contenido rápido, estático o disponible de forma síncrona fuera de ellos. Las barras de navegación, las secciones hero con texto estático y los pies de página deben estar fuera. Los listados de productos, los paneles de usuario y los feeds de comentarios deben estar dentro.

React transmite los límites de Suspense a medida que se resuelven, no necesariamente en el orden en que aparecen en el documento. Una sección fuera de la vista inicial podría resolverse antes que una sección visible inicialmente si requiere menos datos. React gestiona correctamente la inserción en el DOM independientemente del orden del streaming.

La hidratación selectiva de React 18 responde a la interacción del usuario: si el usuario hace clic o pasa el cursor sobre un límite de Suspense que aún no se ha hidratado, React da prioridad a la hidratación de ese límite. Esto garantiza que las interacciones del usuario respondan con fluidez incluso cuando otras partes de la página todavía se están hidratando.

Más límites de Suspense ofrecen mayor flexibilidad de streaming, pero un exceso de límites añade la sobrecarga de los scripts inline de reemplazo. Una pauta práctica es envolver secciones completas (contenido visible inicialmente, barra lateral y feed fuera de la vista inicial) en lugar de componentes individuales. De uno a tres límites de Suspense por página suele ser un punto óptimo.

En la pestaña Network de Chrome DevTools, active "Preserve log" y observe el streaming de la respuesta: el documento HTML crece por fragmentos. La pestaña Performance muestra los marcadores FCP y LCP; compárelos entre compilaciones con y sin streaming para cuantificar la mejora. Limite la conexión a Fast 3G para exagerar el efecto.

¿Qué ocurre con el fallback de un límite de Suspense en la respuesta HTML inicial del streaming?

Los límites de Suspense dividen el árbol de React en secciones que se pueden transmitir de forma independiente. El shell (fuera de Suspense) se transmite primero; los fallbacks aparecen inmediatamente para los límites pendientes y el contenido resuelto sustituye a los fallbacks mediante scripts inline. Los límites anidados tienen líneas de tiempo independientes. Coloque los límites a nivel de sección para obtener una granularidad de streaming óptima y permita que el sistema de prioridades de React gestione el orden de la hidratación impulsada por la interacción.