O cache do Next.js 14 está quebrado?!
Вставка
- Опубліковано 11 лют 2025
- O Next.js 13 trouxe várias novidades graças à nova arquitetura App Router.
Já a versão 14, trouxe melhorias incrementais, nada tão revolucionário quanto à versão anterior.
Porém, um ponto importante e que vem gerando muitas discussões em vários fóruns é o mecanismo de cache adotado pelo Next.js desde a versão 13.
Hoje quero te mostrar esses detalhes e responder a pergunta:
O cache do Next.js esta realmente quebrado?!
---
✅ Curso de Next.js 13:
hotm.art/lA0ujDcw
📷 Segue lá no Instagram:
/ devjunioralves
💭 Participe da nossa comunidade no Discord:
/ discord
🧑💻 Repositório do canal:
github.com/jju...
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
Signals no React.js?!
• Signals no React.js?!
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑💻 Blog: www.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.
Aqui, compartilho conteúdo sobre React.js, Next.js, TypeScript, JavaScript, testes, livros, SOLID e tudo mais relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#nextjs #reactjs #typescript
👉 Se liga nessa lista de livros:
Lógica de Programação e Algoritmos com JavaScript:
amzn.to/48Cj65Z
JavaScript: O Guia Definitivo:
amzn.to/48jh9vp
Como ser um programador melhor
amzn.to/48WYGVj
Arquitetura Limpa (Clean Arch)
amzn.to/3Viqw7v
Clean Code
amzn.to/3hHXVKY
Estruturas de dados e algoritmos com JavaScript
amzn.to/49FOzFd
---
✅ Segue lá no Instagram:
instagram.com/devjunioralves/
✅ Nossa comunidade no Discord:
discord.com/invite/bVxW4Dhgrf
O mesmo exemplo se aplica ao 'revalidate', por exemplo, se você está desenvolvendo um CRUD e criou um item, e você quer mostrar esse novo item criado em uma homepage, por exemplo, o Next.js não irá mostrar esse item novo criado, pois você precisa indicar ao Next.js que a respectiva página precisa ser revalidada para mostrar os novos itens cadastrados. Apenas complementando a explicação do Júnior.
@@unknownsudo1685 então no caso é só exportar do mesmo jeito, de page, só que com revalidate e o time?
@@thesco5281 Sim, exatamente! Aqui está um exemplo de como fazer isso:
// app/page.js ou app/algumaRota/page.js
export const revalidate = 10; // Tempo em segundos para revalidar a página
export default async function Page() {
const data = await fetchData(); // Sua função para buscar os dados
return (
{/* Renderize os dados aqui */}
);
}
Com essa configuração, o Next.js irá revalidar a página a cada 10 segundos, garantindo que os novos itens cadastrados sejam exibidos corretamente.
Booora! Correria do trampo me afastou do canal, mas n tem como, sempre que volto é aprendizado!
vídeo brabo mano! pô, depois traga uns conteúdos de baixo nível, sobre a infra do javascript, como ele faz a alocação de memoria, como controla as filas de funções e etc... também uns conteúdos sobre buffers, seria mt mt interessante já que quase ngm traz conteúdo assim.
Show de bola Carlos, excelentes sugestões.
Parabéns pelo video, ainda nao uso nextjs, mas gosto de assisit aos vídeos. Parabéns e espero que continue com esse bom trabalho
acho que isso não é cache, é só o comportamento padrão de build
uma vez gerado um RSC, ele não roda mais a não ser que seja chamado dnv ou invalidado
o Link do next por exemplo, apenas alterna a visibilidade entre os resultados de RSCs
cache seria uma camada adicional entre o client e um processamento mais demorado, salvando o resultado em algo de mais rápido acesso
como esse processamento demorado da página ja foi feito previamente no build, não há necessidade de cache
se referir ao processo de build a
como cache pode confundir mais ainda quem tá começando
Excelente vídeo, sempre sendo uma luz no final do túnel para desenvolvedores, obrigado por compartilhar, me diga, você possui algum vídeo que possar dar uma clareada em relação a como não ficar consumindo consultas no firestore de uma coleção que tende a não mudar, por exemplo, um cardápio ... venho tentando várias formas, mas tenho a impressão de que terei que fazer algo meu, e ficaria chato de repente estar reinventando a roda rs
Mano tem uma q tá me pegando, tipo tenho um client component q chama um actions server side q atualiza um produto, quando atualizo o produto eu faço o router.push para a página do produto depois de fazer o revalidate da tag da cache dos produtos, porém quando ele da o push vai pra página com a cache antiga ainda, sabe como resolver isso?
@rabbit.d3v eu resolvi isso usando a função de redirecionar a rota pelo server component, aí ele vai pra rota com a cache revalidada
Conteúdo show.
Jr, o que tu aconselha de lib de componentes para iniciar um projeto em NextJS 14? Tailwind? Qual tua opinião? Vlw cara, abração.
Valeu 😊
Valeu man!
Uma duvida, por que next 19? e o 15 não entendi
Vai sair, provavelmente no final do ano, o ReactJS 19.
O Next.js está atualmente na versão 14.
🎉🎉🎉🎉
Pior aqui, configurei um redirect permanente no next config em um projeto. Fui rodar outro pegava a configuração de redirect de outro. Bizarro kkkkk
Eita man, isso aí sinistro. Tu descobriu o por que?
Na Netlify não funciona bem assim 😅
vc teve que fazer alguma coisa pra funcionar no servidor?
Vazou a data 😮
Que data? 🤔
o Next vem escolhendo um caminho meio esquisito nos últimos tempos
preocupado KKKKKK
Sim, tem algumas coisas que, pra mim, não faz muito sentido. Algumas configs poderiam ser default=false, caso tu precise, aí você habilita.
like 10
Valeuuu 👊
bora que eu to com fome
Opaaa, tava faltando seu comentário man!