¿Cómo funcionan Suspense y React.lazy para la división de código (code splitting)?

Question

Accepted Answer

**`React.lazy`** carga el bundle de JavaScript de un componente **bajo demanda** (solo cuando se renderiza por primera vez). **`Suspense`** muestra una interfaz de respaldo (fallback) mientras cualquier hijo lazy (o que suspende por datos) todavía se está cargando. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Por qué importa: una carga inicial más pequeña Sin división de código, el navegador descarga tu aplicación **completa** (incluida la pesada biblioteca de gráficos) antes de mostrar nada. Con `lazy`, el código de `Chart` se separa en su propio archivo y se obtiene solo cuando el usuario realmente llega a él — mejorando el tiempo de carga inicial y los Core Web Vitals. ## Cómo lo coordina Suspense Cuando `Chart` suspende (su bundle no está listo), React "pausa" esa parte del árbol y renderiza el fallback del `Suspense` más cercano en su lugar, y luego intercambia el componente real una vez que carga. Un único límite puede envolver varios hijos lazy y mostrar un solo fallback: ```jsx }>

``` ## Más allá de la división de código Suspense también coordina la **carga de datos** con frameworks/bibliotecas que "suspenden" ante un fetch pendiente, y se combina con el **SSR por streaming** (Next.js App Router) para enviar un esqueleto rápido y transmitir las partes más lentas a medida que llegan. Coloca los límites con criterio para evitar cambios de diseño grandes y bruscos cuando el contenido aparece. ## Por qué es importante La división de código con `lazy` y `Suspense` reduce el JavaScript que los usuarios descargan por adelantado, lo que acelera la carga inicial y la interactividad, a la vez que ofrece una forma declarativa y limpia de gestionar los estados de carga.