React Query Mastery
Cache assíncrono parece simples mas pode pregar algumas peças nos desenvolvedores na hora de aplicar em uma página que está demorando para carregar, em uma paginação que demora para retornar, em um scroll infinito que trava, um dashboard que se torna pesado para o servidor responder e um refresh que o usuário precisa fazer para atualizar os dados da página. Esta demo vai tentar esclarecer cada um desses problemas de forma prática explicando o conceito e como será feito.
Tecnologias
- TanStack Query v5
- Next.js SSR (prefetchQuery + HydrationBoundary)
- React Intersection Observer
Arquitetura
- Cache client-side gerenciado pelo TanStack Query com prefetch e hydration no servidor (SSR) e invalidação seletiva por chave de query
Conceitos
- Invalidação de Cache
- Refreshs otimizados com rollback
Área de demonstração
A demonstração interativa deste recurso estará disponível em breve.
Em Breve
A demonstração interativa de React Query Mastery está em desenvolvimento. A arquitetura e os detalhes técnicos já estão documentados acima.
Arquitetura de Micro-frontends
Um diagrama vivo do Feature-Sliced Design deste projeto, mais uma demo de Module Federation mostrando dois micro-apps independentes lado a lado.
Performance Showcase
Otimizações mensuráveis: virtualização de listas, code splitting, memoização e Web Workers, com métricas visuais.