Summary  
This chapter explains how to group related components under a single wrapper and leverage React’s Suspense with a skeleton fallback to optimize asynchronous data fetching and avoid jarring visual loading effects.  

General domain of usage  
Web user interface development

¿Qué sucede con los componentes `Card`? ¿Deberíamos agregar el cargador para cada tarjeta o cómo manejar este componente?

Al obtener datos para componentes individuales `<Card>`, puede surgir un problema potencial: cargar cada tarjeta por separado puede causar un *efecto de aparición* a medida que se cargan. Este cambio visual repentino puede resultar molesto para los usuarios.

Para mitigar este problema, considere los siguientes pasos en el archivo `page.tsx`.

## Volver al proyecto
- Eliminar los componentes `<Card>`;
- Eliminar la función `fetchCardData()`;
- Importar un nuevo componente contenedor llamado `<CardWrapper />`;
- Importar un nuevo componente esqueleto llamado `<CardsSkeleton />`;
- Envolver `<CardWrapper />` en `Suspense`.

- Navegar a `app/ui/dashboard/cards.tsx`;
- Importar `fetchCardData()`;
- Invocar `fetchCardData()` dentro del componente `<CardWrapper/>`;
- Descomentar el código necesario.

Aprende a construir aplicaciones web modernas y de alto rendimiento utilizando Next.js. Configura proyectos con estructuras organizadas, estilos y enrutamiento para una navegación fluida. Obtén y muestra datos de manera eficiente mientras optimizas el renderizado y el rendimiento. Implementa funciones avanzadas como paginación, operaciones CRUD y búsqueda global para aplicaciones web dinámicas. Despliega tus proyectos de Next.js, conéctalos con bases de datos y añade autenticación para proteger los datos de los usuarios.

Analizaremos los conocimientos previos necesarios antes de comenzar con el framework Next.js, lo que puede esperar de este curso y los proyectos que desarrollará.

Configuraremos el proyecto, examinaremos formas de agregar estilos a nuestra aplicación y abordaremos aspectos visuales como imágenes, fuentes, páginas y diseños.

Aprenda a crear y gestionar fácilmente una nueva vista para su aplicación y a navegar por todas las páginas de manera fluida con un sistema de enrutamiento incorporado.

Despliegue de la aplicación Next.js utilizando cuentas de GitHub y Vercel. Además, establecimiento de una base de datos para proporcionar los datos necesarios a la aplicación.

Considere cómo obtener y mostrar datos al usuario de manera clara y eficiente.

Descubra cómo implementar características web modernas como paginación, operaciones CRUD, búsqueda global, validación de formularios y más.

Implementación de autenticación en Next.js.

Optimizando Cargadores con Agrupación de Componentes

Volver al proyecto

En la práctica

Awesome!

Optimizando Cargadores con Agrupación de Componentes

Volver al proyecto

En la práctica