React Query e Next.js: o poder do cache no frontend
Entenda como React Query e Next.js podem transformar o cache do seu frontend, melhorando performance e experiência do usuário! 🚀 E o próximo evento já tem data!
Fala GDG! Auditório lotado e mil inscritos na newsletter! 🎉
Dois marcos importantes foram alcançados neste último evento: reunimos mais de 150 participantes no evento GDG Londrina + DevParaná na Estrada na Unopar Anhanguera - Catuaí e ultrapassamos a marca de 1000 inscritos nesta newsletter! 🚀
O encontro foi marcado pela diversidade de participantes - desde membros de longa data até quem estava conhecendo a comunidade pela primeira vez - criando aquela atmosfera única de aprendizado colaborativo.
No palco, conhecimento técnico de primeira:
Luiz Schons quebrou a cabeça de muita gente ao explicar por que "CORS funciona no Postman mas não no navegador" - um problema clássico que todo desenvolvedor web já enfrentou.
Em seguida, Enrico Secco aprofundou o tema "Decisões técnicas com impacto estratégico: React Query e Next.js no cache de projetos frontend reais".
Queremos agradecer a cada pessoa que contribuiu para este evento incrível - com presença, perguntas e networking!
E por falar em networking... Vem aí nossa primeira edição 2025 dos Meetups do GDG Londrina focada totalmente em conexões! 🍻
Na quarta-feira, 16/04, estaremos no Jamô Bar para uma noite descontraída de troca de experiências e novas amizades na comunidade tech. E tem mais: vai ter videogame liberado!
O evento é gratuito, mas atenção: 🔥 vagas limitadas 🔥
Na última edição da newsletter, exploramos sobre por que seu código funciona no Postman, mas falha no navegador — um problema que afeta praticamente todo desenvolvedor web em algum momento. Se ainda não conferiu, vale a pena dar uma olhada!
Nessa edição, vamos explorar o cache no frontend com React Query e Next.js! Como as decisões sobre cache podem afetar a performance, a experiência do usuário e até os custos do seu projeto? Vamos discutir conceitos, desafios e boas práticas para tomar decisões mais inteligentes sobre cache no frontend!
Já interagiu com a comunidade hoje?
A cada evento, nossa comunidade só cresce, e o engajamento aumenta! Se você está aqui, já faz parte desse grupo incrível que reúne mais de 1000 membros 🎉 — acabamos de atingir esse marco incrível graças à participação e ao apoio contínuo de todos vocês! Por isso, não deixe de acompanhar e fazer parte dessa jornada com a gente. No nosso site, você encontra diversas formas de interagir e se conectar com outros desenvolvedores. 👉 https://gdg.londrina.dev
E não para por aí! Nossa comunidade no WhatsApp é o lugar perfeito para ficar por dentro dos próximos eventos, trocar ideias, participar de discussões sobre tecnologia, rir com memes e, claro, se manter atualizado sobre vagas para todos os níveis e stacks. É a maneira mais prática de estar sempre conectado com a galera da comunidade Dev de Londrina e região!
Conecte-se com a gente clicando aqui.
Agora vamos ao que interessa!
🎯 React Query e Next.js: o poder do cache no frontend
Você já trabalhou em um projeto preso no tempo, onde a stack defasada impede qualquer evolução?
Esse foi o desafio que o Enrico compartilhou no GDG Londrina: um sistema que precisava ser moderno, performático e escalável, mas que estava engessado por dependências antigas, código acoplado e um falso "real-time" baseado em requisições a cada 5 segundos.
📌 O cenário inicial: um projeto que não evolui
O sistema enfrentava diversos problemas técnicos:
❌ Build tool obsoleta e sem suporte, impedindo a atualização do React
❌ Código altamente acoplado, com componentes gigantes e sem extensibilidade
❌ "Real-time", onde a tela inteira era atualizada a cada 5 segundos, sobrecarregando frontend e backend – um claro candidato para otimização via cache
O maior desafio? Os clientes estavam acostumados com esse comportamento "real-time" e esperavam que o produto funcionasse assim. Alterar a abordagem exigia um plano estratégico bem definido.
🔄 A solução: modernização e estratégias de cache
Para melhorar performance e experiência do usuário, a abordagem pensada foi:
Migrar para uma build tool, bundle ou framework moderno
Implementar estratégias de cache eficientes, evitando requisições desnecessárias
💡 Client-Side vs. Server-Side: quando usar cada um?
Client-Side Rendering (CSR)
O navegador gerencia a renderização da página, carregando o JavaScript antes de exibir o conteúdo.
📌 Benefícios do React Query
✔️ Gerencia estado e requisições HTTP no client
✔️ Oferece cache eficiente e refetch automático no background
✔️ Controle sobre o Stale Data, definindo quando uma informação deve ser recarregada
Server-Side Rendering (SSR)
O servidor pré-renderiza o HTML antes do envio ao navegador, melhorando o carregamento inicial e SEO.
📌 Benefícios do Next.js
✔️ Cache nativo, sem dependência de bibliotecas externas
✔️ Server Actions, executando chamadas diretamente no servidor
✔️ Server Components, habilitando a opção de renderizar os componentes no servidor, otimizando o carregamento
🔥 Vite + React Query: a primeira aposta
Inicialmente, a ideia era utilizar React Query como solução principal, pois ele:
🔹 Gerencia requisições HTTP e estado global no client, sem a necessidade de useEffect para requisições
🔹 Revalida automaticamente os dados, reduzindo a quantidade de chamadas à API
🔹 Controla dados "stale", realizando refetch no background para manter a interface atualizada com uma abordagem stale-while-revalidate
O stale-while-revalidate no React Query exibe dados em cache enquanto busca versões atualizadas em segundo plano.
📌 Diferencial: Em vez de refazer requisições a cada 5 segundos, A ideia era utilizar cache inteligente para atualizar apenas os dados necessários.
Mas havia um problema: não podíamos sobrecarregar o usuário e processar tudo no client.
🚀 Mudança de plano: Next.js entra em cena
Para resolver a limitação do processamento no client side, a solução considerada foi migrar para Next.js, aproveitando:
🔹 Server Actions, permitindo chamadas de API diretamente no servidor, reduzindo a carga no client
🔹 Server Components, permitindo a renderização direta no servidor, enviando HTML pronto para o browser
🔹 Cache nativo, armazenando e servindo dados de forma otimizada, evitando requisições desnecessárias
📌 Ambas as abordagens podem ser combinadas – é possível usar Next.js para renderizar dados iniciais e React Query para revalidação dinâmica.
👨🔬 PoC e aprendizado
Uma Prova de Conceito (PoC) foi planejada para validar a solução. No entanto, antes da implementação completa, o projeto entrou em modo de manutenção.
Mesmo assim, o aprendizado foi valioso:
✅ Cache não é apenas manter dados em memória, mas otimizar requisições e evitar processamento desnecessário
✅ CSR e SSR podem (e devem) coexistir, dependendo do contexto
✅ Nem sempre uma solução perfeita será implementada, mas a análise técnica nunca é em vão
📌 Lição final: O conhecimento adquirido nunca se perde. Você pode esquecer a implementação exata, mas saber que uma solução existe — e quando aplicá-la — é o que realmente importa. 🚀
Vem para a Comunidade!
Ajudar pessoas a crescer na área de tecnologia é um dos nossos objetivos como comunidade. Cada evento é uma oportunidade de aprender, se conectar e até mesmo compartilhar o que você sabe. Que tal dar uma palestra no próximo encontro? A comunidade está aqui para te apoiar e incentivar.
Não deixe de acompanhar nossas novidades, interagir com o pessoal e aproveitar ao máximo tudo o que o GDG Londrina tem a oferecer. Juntos, podemos transformar o cenário de tecnologia na região e no Brasil. Bora lá? 🚀