Anteriormente, abordamos como tornar o aplicativo dinâmico. No entanto, lidar com uma grande quantidade de dados pode resultar em buscas lentas, impactando negativamente o desempenho da aplicação.

Agora, vamos explorar estratégias para melhorar a experiência do usuário ao lidar com requisições de dados lentas.

Teoria

Podemos utilizar a técnica amplamente adotada chamada Streaming.

Streaming é uma forma de enviar informações em partes menores, em vez de tudo de uma vez. Imagine como dividir uma longa jornada em etapas menores e avançar apenas quando estiver pronto. Isso ajuda a evitar atrasos e permite visualizar e utilizar partes de uma página web sem precisar esperar todo o carregamento.

No Next.js, existem duas formas de realizar streaming:

• Para toda a página web, utiliza-se um arquivo chamado loading.tsx;
• Para partes específicas da página web, utiliza-se o <Suspense>.

Vamos analisar mais de perto como isso funciona.

Transmitindo toda a página

Crie um arquivo loading.tsx na pasta dashboard para adicionar um carregador à página inteira do dashboard.

• loading.tsx: Arquivo especial no Next.js que utiliza Suspense. Permite criar uma interface temporária (UI de fallback) exibida enquanto o conteúdo principal da página está sendo carregado;
• Como o <Sidebar> é estático (não muda), ele aparece imediatamente. Usuários podem interagir com ele mesmo enquanto o conteúdo dinâmico está carregando.

Ótimo trabalho! Você acabou de utilizar streaming.

Corrigindo bug

O problema atual é que o carregador utilizado no arquivo loading.tsx está sendo aplicado a todas as páginas dentro da pasta dashboard. No entanto, e se precisarmos de elementos de interface específicos para cada página do aplicativo?

Para resolver esse bug, é possível implementar Route Groups. Crie uma pasta (overview) dentro do diretório dashboard e mova os arquivos loading.tsx e page.tsx para lá.

Dessa forma, o arquivo loading.tsx será aplicado exclusivamente à página do dashboard, resolvendo o problema.

Grupos de Rotas auxiliam na organização dos arquivos sem alterar o endereço da web. Ao criar uma pasta com parênteses (), o nome da pasta não fará parte do endereço da web. Por exemplo, /dashboard/(overview)/page.tsx torna-se apenas /dashboard.