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

E quanto aos componentes `Card`, devemos adicionar o loader para cada card ou como lidar com esse componente?

Ao buscar dados para componentes `<Card>` individuais, pode surgir um problema potencial — carregar cada card separadamente pode causar um *efeito de aparecimento* à medida que eles são carregados. Essa mudança visual repentina pode ser desconfortável para os usuários.

Para mitigar esse problema, considere as seguintes etapas no arquivo `page.tsx`.

## De volta ao projeto
- Excluir os componentes `<Card>`;
- Excluir a função `fetchCardData()`;
- Importar um novo componente wrapper chamado `<CardWrapper />`;
- Importar um novo componente skeleton chamado `<CardsSkeleton />`;
- Envolver `<CardWrapper />` em `Suspense`.

- Navegar até `app/ui/dashboard/cards.tsx`;
- Importar `fetchCardData()`;
- Invocar `fetchCardData()` dentro do componente `<CardWrapper/>`;
- Descomentar o código necessário.

Aprenda a construir aplicações web modernas e de alto desempenho utilizando Next.js. Configure projetos com layouts estruturados, estilização e roteamento para navegação fluida. Busque e exiba dados de forma eficiente, otimizando a renderização e o desempenho. Implemente recursos avançados como paginação, operações CRUD e busca global para aplicações web dinâmicas. Faça o deploy de seus projetos Next.js, conecte-os a bancos de dados e adicione autenticação para proteger os dados dos usuários.

Vamos discutir o que é necessário aprender antes de começar com o framework Next.js, o que esperar deste curso e o que será desenvolvido.

Vamos configurar o projeto, analisar formas de adicionar estilos ao nosso aplicativo e abordar aspectos visuais como imagens, fontes, páginas e layouts.

Aprenda a criar e gerenciar facilmente uma nova visualização para seu aplicativo e navegar por todas as páginas de forma fluida com um sistema de roteamento incorporado.

Implemente o aplicativo Next.js utilizando contas do GitHub e Vercel. Além disso, estabeleça um banco de dados para fornecer os dados necessários ao aplicativo.

Considere como obter e apresentar dados ao usuário de forma clara e eficiente.

Descubra como implementar recursos modernos da web, como paginação, operações CRUD, busca global, validação de formulários e mais.

Implementação de autenticação no Next.js.

Otimizando Carregadores com Agrupamento de Componentes

De volta ao projeto

Na Prática

Awesome!

Otimizando Carregadores com Agrupamento de Componentes

De volta ao projeto

Na Prática