Hasta ahora, hemos estado transmitiendo páginas completas. Sin embargo, podemos ser más específicos utilizando Suspense de React para transmitir componentes concretos.

Suspense nos permite retrasar la visualización de partes de la aplicación hasta que se cumpla una condición específica, como la carga de datos. Simplemente envuelve los componentes dinámicos en Suspense y proporciona un componente temporal para mostrar mientras la parte dinámica se carga. Para lograr esto, traslada la obtención de datos al propio componente.

Volver al proyecto

Elimina fetchIncome() y sus datos de app/dashboard/(overview)/page.tsx:

Importar <Suspense> de React y envolver el <IncomeChart/> con él. Se puede pasar un componente de reserva llamado <IncomeChartSkeleton>.

Finalmente, se debe actualizar el componente <IncomeChart> para que obtenga sus propios datos y eliminar la prop que se le pasaba:

Ahora, al actualizar la página en vivo, se debe observar un cargador esqueleto en el lugar del gráfico mientras se cargan los datos.

En la práctica

Importante: No es necesario mover el archivo layout.tsx a la carpeta (overview) como se muestra en el video.