Entenda o cache do Next.js de uma vez! (cache tags e revalidation)

fala Dev beleza mais um vídeo aqui pro YouTube da Rocket City E chegou a melhor parte da sua quinta-feira melhor parte da sua semana na verdade Lembrando que eu vou est aqui toda quinta-feira neste mesmo horário nesse mesmo bate canal e hoje pra gente falar sobre uma das coisas aí que transformou o frontend ao longo dos últimos anos e principalmente aí no último ano modificou de uma forma que deixou muita gente descontente mas que ao mesmo tempo a gente é obrigado a aprender dado que é uma ferramenta que tá sendo utilizada de uma forma intensa massiva no mercado não tem como a gente se dar o luxo de pelo menos não aprender a utilizar que é o nextjs mas o nextjs a partir da sua versão 14 como eu Bem venho falando aqui a gente mudou grande parte da arquitetura da estrutura das aplicações construídas com o nextt porque veio o famoso app halter e a gente tá saindo aos poucos do pages halter que são duas maneiras diferentes da gente construir a parte de componentes de páginas ali dentro da nossa aplicação e já tem vídeo completo aqui dentro do YouTube da Rocket City se você procurar aí app houter você vai cair ali numa Live de 2 horas que cara eu falo sobre todas as funcionalidades e claro com muito código e também se você é aluno da Rocket já tem dois cursos completos um com next 14 mostrei um dedo aqui mas né tomara que ninguém clipe e um com next 15 também ah criando um SAS ali usando next e os dois usando o app hter Mas tirando o Jabá de lado que que eu vou te mostrar aqui hoje já tô com código na tel tela já tô com a aplicação pronta aqui na tela Porque existe uma coisa que quase todo mundo tá errando dentro do nextjs utilizando essa nova arquitetura de server components e principalmente com a parte de caching dentro do nextjs que é basicamente o funcionamento padrão do Next de quando nós fazemos uma requisição fat nós podemos cachear essa requisição e apenas recarregá-la sob demanda quando necessário e a gente vai falar um pouquinho sobre isso agora e principalmente voltado as Cash tags do Next por qu quando a gente faz qualquer tipo de requisição ali dentro do Next né Por exemplo quero buscar dados de um usuário uma lista de usuários dados do meu perfil eu consigo colocar uma tag nessa requisição para quando eu precisar limpar o Cash dessa tag e fazer uma revalidação nela né ver revalidação nada mais do que o processo de trazer uma informação atualizada sobre aquilo né limpar o Cash eu posso colocar essas tags como uma maneira de eu identificar essas requisições e eu conseguir realizar a atualizações em pequenas partes da minha interface em partes das aquisições da minha interface só que muita gente tá errando isso porque muita gente vem do react acostumado com o padrão do react query de fazer requisições se você já utilizou o react query aí do ttech coloca aqui embaixo nos comentários porque eu uso essa biblioteca há muito tempo e continuo utilizando até hoje inclusive em projetos nextjs mesmo com tudo isso do server components porque em muitos momentos a gente precisa Sim ainda utilizar o react query e eu posso fazer um vídeo falando sobre isso sobre como diferenciar esses momentos Mas isso é outra coisa isso é coisa para outro vídeo só que lá no react query é muito comum quando a gente faz a requisição a gente adicionar algo que a gente chama de Cury Key a Cury Key nada mais é do que uma forma da gente identificar vou até abrir aqui no no navegador né então react query query Key uma forma da gente identificar aquela requisição de uma maneira única então por exemplo se eu tô fazendo uma requisição que busca uma lista de TO é comum que eu passe para ela uma query Key todos certo se for uma lista paginada por exemplo eu posso ou um Tod específico eu posso falar olha eu estou buscando e o ID dessa requisição é todo e o ID do todo assim um dia caso eu faça qualquer tipo de atualização e nesse todo eu consigo revalidar né ou até eh invalidar o cche com base nessa cur Key ou seja como se toda a requisição que eu fizesse na minha aplicação ela tivesse um id e esse ID fosse a chave para eu conseguir fazer alterações ou invalida nesse Cash para quando o usuário acessar novamente aquela lista de todus Ou aquele tudu específico ele tem a informação atualizada e não aquela que tá em cash só que o Next Ele trouxe isso né com essa ideia de de tags ao invés da gente utilizar Esse identificador essa C aqui e aí acabou que muita gente continuou com o mindset do react query que é uma maneira Ah que não é a correta quando a gente tá trabalhando aqui com com as Cash tags do nextt E aí o que que eu fiz tá olha só eu criei basicamente uma aplicação E aí meu Deus do céu o que que eu fiz aqui mas eu criei uma aplicação que ela tem simplesmente um cabeçalho essa aplicação aqui ela tá escrita em next 15 tá ela tem um cabeçalho ela tem aqui uma um formulário pro usuário poder atualizar o avatar dele e um formulário pro usuário poder atualizar as outras informações nome e e-mail ou seja veja que eu eh separei em dois formulários eu já vou te explicar O porquê disso tá E aí também o que eu fiz aqui foi criar um servidor node bem simples sem utilizar Express sem usar FF sem usar nada eu só pedi pro chat PT criar aqui um servidor node que ele Guarda um perfil do usuário como se fosse um banco de dados e ele tem três rotas uma para retornar o perfil uma para atualizar somente o Avatar do perfil e uma para atualizar os restantes dos dados do perfil como nome e e-mail perfeito que é o suficiente para eu rodar a minha aplicação E aí eu criei uma aplicação next aqui simples né dentro do out eu basicamente chamei o componente header esse componente header ele é um server component Ou seja eu posso fazer uma requisição aqui nele buscar os dados do perfil lá da minha api esse aqui são os dados retornados pela api Ok E eu simplesmente quero apenas mostrar a imagem do usuário no meu cabeçalho Guarda essa informação que ela é muito importante o meu cabeçalho Só precisa da imagem Apesar de que a requisição que me retorna os dados do perfil retorna todos os dados do perfil nome e-mail e também a imagem só que eu só preciso da imagem isso aqui é muito importante essa informação perfeito e aí eu tenho lá na minha página né os dois formulários um abaixo do outro aqui um formulário que ele é simplesmente um form usando server component aqui do Next né então ele é o form com input e um botão para salvar o avatar e o outro formulário esse update profile form eu fiz um form integrado com react Hook form que é a biblioteca mais utilizada para trabalhar com formulários dentro do react provavelmente também você já utilizou essa biblioteca se você nunca utilizou essa biblioteca Das duas uma ou você é muito iniciante no react ou você provavelmente não trabalhou com nenhum projeto react em alguma empresa porque quase todo mundo tá utilizando essa biblioteca para lidar com formulários E aí quando veio essa onda né de server components ficou muito muito escura essa ideia de cara eu continuo usando react Hook form ou agora eu devo e evitar qualquer biblioteca que precisa do use client e aqui já adiantando para você não a gente não vai parar de usar react Hook Farm até porque a experiência pro usuário ela é incrível quando a gente tá usando essa Lib tudo se comporta muito bem É claro que nem sempre a gente precisa do react Hook Farm mas claro qualquer formulário que tem validação que preciso ali mostrar algum tipo de informação em tempo real conforme o usuário vai mexendo no input cara react Hook form continua sendo a melhor solução e por isso que eu quis trazer esses dois formulários um com react Hook Farm e um sem pra gente ver como que muda isso tá E aí bora entrar aqui dentro ah dos internos aqui a gente começar a a a chamar essas nossas rotas para fazer a atualização do perfil em si tá E aí como que a gente pode fazer né lembrando eu tenho duas rotas lá na minha api tem uma forma da gente fazer que é o seguinte vamos lá vamos começar pelo Avatar para eu atualizar o avatar usando aqui server components né sem um formulário integrado ao react Hook Farm o formulário Ele é todo server Side eu posso criar uma função aqui dentro por exemplo a update Avatar ele vai receber um data que é o meu form data certo e eu vou falar que isso aqui é uma server function simplesmente colocando essa diretiva use server Isso aqui faz com que automaticamente o Next transforme isso aqui em um endp http uma rota E aí quando eu passo esse update Avatar como Action pro meu formulário quer dizer que quando o usuário fizer o submit do formulário ele vai estar chamando uma rota e o conteúdo dessa rota http é o que tiver aqui dentro Isso aqui vai tá rodando no server Side do nextjs E aí aqui dentro Eu vou fazer a requisição lá paraa minha api localhost 3333 barra e a rota se eu não se eu não me engano é profile bar Avatar Ok e o método é Patch E aí no bar eu tenho que enviar aqui json string F né tô usando fat nativo por isso aqui eu vou ter que fazer alguns algumas coisas na mão né como por exemplo string fy e aqui eu preciso enviar para ele Ah o campo Avatar URL então vou enviar Avatar URL aqui esse Avatar URL vem da onde desse data né então se eu botei o nome do meu campo como Avatar URL eu posso pegar aqui ó const Avatar URL É iG data. get Avatar url que é o nome do meu campo né então esse nome aqui ele é repassado aqui para dentro do Farm data ponto ah na verdade deixa eu ver aqui ele já ele traz como form data entry value só que ele pode ser nullable né então a gente não tá fazendo uma validação aqui Ah aqui eu posso fazer um Twi string só que ele pode continuar não existindo né porque pode ser que não venha essa informação eu fazer o seguinte se não vier Avatar URL eu vou simplesmente dar um return não vou fazer nada e aí senão eu vou usar o avatar URL aqui que daí no caso ele já entende que é uma string Ah e perfeito tá E aí que que a gente vai fazer agora para testar se eu salvar isso aqui agora voltar lá na minha aplicação Teoricamente ó vou até Abrir aba Network aqui do lado quando nós deixa eu diminuir um pouquinho aqui deixa eu tirar todas quando nós viermos aqui botar por exemplo htps github. com bar Mike brito.

pdf pode ser que não deixa dar um F5 aqui na minha api Olha lá já tá atualizado ó Avatar URL M Brito certo só que veja que no cabeçalho aqui da minha aplicação ainda tá mostrando a minha foto só que se se eu dou um cont F5 aqui ele já atualiza pra foto do Mike cara mas isso aqui vamos lá né é a primeira coisa Poxa mas não seria interessante quando o usuário alterar o avatar dele lá no perfil S aqui em cima ele já atualizar mostrar a informação correta e cara isso é totalmente possível e a gente pode fazer isso usando essas Cash tags do nextjs então o que que a gente vai fazer lá no meu cabeçalho eu posso vir aqui ó no fatch passar para ele vírgula abro aqui as configurações boto next boto tags E aí eu posso passar quantas tags eu quiser grave essa informação isso é bem importante né eu posso passar várias tags pra mesma requisição E aí a gente começa a entrar no que muitas pessoas erram aqui no next que é simplesmente fazer uma relação de um para um entre o fat do Next com o server components paraa react query no react query Eu geralmente identifico a requisição que eu tô querendo fazer ai de Meu cotovelo aqui do lado então por exemplo se eu tô buscando o profile eu vou dar um ID para ela por exemplo profile isso aqui é muito comum no react query e a gente vai seguir por aqui é dessa forma e logo te mostro porque que isso aqui não é tão legal aí eu vou lá no meu avatar agora depois de eu fazer a requisição aqui que atualizo o avatar eu vou chamar o revalidate Tag do Next cach e passo profile Vou salvar aqui agora e olha que interessante eu venho aqui agora no meu projeto meu Deus abriu aqui vou trocar a URL aqui ó github. com bar Diego 3g. com.

br e já mudou o avatar no cabeçalho isso aqui já é muito legal principalmente pensando que até agora a gente não usou qualquer componente client Side nenhum componente que tenha use client tudo isso tá acontecendo simplesmente com o mecanismo do nextjs ah de server components né e da da de transformar essas server Actions aqui né que server foi renomeado para server functions já não sei mais ah e e basicamente a resposta dessa server function Ela traz com ela o os dados que eu tô querendo revalidar né então se a gente for olhar por baixo dos panos o que tá acontecendo aqui ó quando eu atualizo o avatar veja que na resposta ele tá trazendo um monte de coisa tá vendo esse tanto de coisa que ele tá trazendo aqui é porque eu coloquei esse revalidate tag profile ou seja ele traz todo o HTML necessário para atualizar o meu cabeçalho com aquele novo Avatar né então ele tá trazendo digamos Claro na sintasse dele mas é o HTML da nossa página ali com o novo Avatar exibindo ali no cabeçalho perfeito até aí tudo bem agora vamos pro nosso outro formulário no nosso outro formulário ele já é um client component então eu não posso vir aqui ó e fazer criar uma uma server function né uma server isso uma server function diretamente aqui dentro do formulário o que eu poderia fazer é aqui diretamente chamar a nossa api então poderia vir aqui ó chamar o fat né e enviar aqui o nome e o e-mail usar método aqui e o profile que é a minha rota correta certo se eu salvar isso aqui agora Teoricamente vai funcionar Então olha só eu venho aqui ó vou trocar o nome para Mike Brito Mike Brito já não sei qual que é o e-mail dele botar acho que é só Mike só vou clicar em salvar ó deu erro Vamos tentar entender aqui qual que foi o erro que aconteceu tá Ah fail to fetch hã deixa eu dar uma olhar aqui na aba Network course error tá lá no meu backend eu não coloquei eh não configurei cores né então para quem sabe isso aí cara eu e eu não tô Aim de configurar então eu não vou nem continuar por isso que eu o que acontece né quando uma requisição ela sai de um cliente né de um browser paraa sua api precisa do corse configurado né o cors é basicamente uma forma de eu dizer lá no meu backend quais endereços front end vão poder acessar a minha api agora se você fizer a requisição de um servidor para outro servidor o cores ele não é necessário e é por isso que aquela requisição que a gente fez aqui no formulário dentro de uma server function funcionou porque isso aqui tá sendo feito do servidor do Next que é um servidor node que tá rodando ali junto ou seja não precisa corse tá mas o certo seria configurar Claro mas aqui a gente né não não não não vou me não vou entrar em detalhes Mas por que que a gente não vai fazer o fetch aqui dentro direto no react hook form porque lembra lá do nosso revalidate tag a gente não pode chamar esse revalidate tag através do cliente do código que tá rodando em client Side no next Ele só pode ser executado dentro de server functions ou dentro de roote handlers né que são as rotas de api aqui do nosso projeto então que que eu vou fazer aqui olha isso aqui é um pattern que eu tô usando em quase todas minhas aplicações aqui na minha página eu vou criar veja a minha página ela é um server component certo eu vou criar a função de atualização do perfil aqui dentro ó então update profile tá ela precisa receber aqui um nome que é uma string e um e-mail que é uma string E aí eu posso desestruturar e aqui eu faço a requisição então putch envio o name envio o e-mail e aqui sim eu posso fazer o revalidate porque eu tô dentro de uma server function E aí olha que legal no next Isso é uma das coisas mais importantes para você que tá começando a trabalhar com next com server component saber é eu posso enviar server functions como propriedades pros meus client components Então olha só eu posso enviar esse update profile aqui pro meu formulário então geralmente quando eu envio uma função eu gosto de começar sempre com o nome on update profile E aí eu envio a minha função lá no meu form eu vou pegar isso aqui né E aí falar que ele pode receber on update profile vou até tipar isso aqui aqui em cima né então botar update profile form props on update profile é uma função ela é uma devolve uma Promise void porque não tem nenhum retorno e eu vou enviar para ela ã um data que é o nome e o e-mail do usuário ou até Posso aproveitar aqui o skima e já reaproveitamos aqui agora eu vou pegar esse on update profile aqui dentro e agora aqui dentro ó eu vou simplesmente chamar o meu on update profile enviando nome e e-mail show de bola né agora bora testar te Teoricamente deve est tudo funcionando Então olha só vou dar um F5 aqui ah sola no final do meu form aqui ó no meu profile form eu vou pegar aqui a função reset do react Hook form e vou chamar ela no final aqui para resetar os campos do formulário tá então vou dar um F5 tudo certo ó na minha pay beleza vamos lá trocar o nome né então Mike Brito Mike @ rocket. com. br vou dar um salvar e pronto já resetou se eu dou um refresh na minha api Olha lá Mike Brito já tudo certinho e aí o que acontece né como a gente colocou esse revalidate tag profile tanto aqui no update Avatar quanto no update profile que atualiza o nome e o e-mail lá no meu header se eu tivesse mostrando aqui o nome do usuário também né então botar aqui um profile pname né Mike Brito ó olha só quando eu viesse aqui alterasse para Diego Fernandes por exemplo Diego @ rocket.

com. br salvar Olha só ele já altera também para Diego Fernandes no cabeçalho né então tudo o que que eu tô alterando aqui já altera automaticamente no cabeçalho por causa do revalidate do Next só que aí que vem o problema Lembra que eu falei que no meu cabeçalho eu não queria mostrar o nome do usuário queria mostrar só a imagem o que que tá acontecendo na nossa aplicação tanto a atualização do perfil está revalidando o profile né o avatar no caso tá revalidando o profile tanto a atual ação de nome e e-mail também estão revalidando o profile só que tu concorda comigo que eu só quero revalidar este esse esse header aqui né mostrar uma informação atualizada no caso o Avatar do usuário se o avatar mudar e não se o nome e o e-mail do usuário também mudarem isso não é importante o header não precisa disso e é por isso que a gente precisa mudar um pouquinho a forma que a gente pensa no next nessa parte de Cash tags como que a gente tem que fazer Qual que é o correto eu dar nomes pras tags não na hora que eu tô fazendo a requisição para por exemplo buscar o perfil não é nas ações do usuário é as ações do usuário que precisam ter ids precisam ter tags Então olha só quando eu vou atualizar o avatar eu venho aqui no final e falo olha usuário atualizou o avatar update Avatar quando ele atualizou o perfil ele atualizou o perfil agora quando eu for fazer uma requisição eu posso falar que eu preciso atualizar esta informação em tempo real Quando acontecer a ação update Avatar Então veja que é o caminho contrário não é eu fazer uma requisição dar um ID para ela e depois quando acontecer alguma ação eu vou lá e Limpo o Cash não é eu faço uma ação essa ação como como se ela disparasse um evento E aí eu posso ouvir este evento em algum local da minha aplicação para atualizar uma determinada informação e agora o que que vai acontecer eu só atualizo isso quando mudar o avatar veja que se eu vier aqui e mostrar agora o nome do usuário ó beleza nome do usuário vir aqui e atualizar para Mike Brito salvar ele atualizou por não sei deixa eu lembrar já descobri o problema o desgraçado aqui eu tinha deixado essa opção disable Cash aqui no Browser habilitada isso aqui tava me ferrando a cabeça então cuidado com essa opção aqui porque ela desabilita qualquer Cash E aí como Muitas das coisas aqui do Next eu tô mostrando elas são sobre Cash né Com cash desabilitado eu não consigo mostrar mais nada e outra coisa importante é que uma das coisas que eu esqueci é que do Next 14 pro 15 eles desabilitar o comportamento padrão de Cash das requisições isso quer dizer que antes todas as requisições que eu fazia http que não tinham qualquer informação dinâmica como um cookie de autenticação né que isso já automaticamente elimina ela de qualquer Cash Mas qualquer requisição antes que era feita ela era automaticamente cacheada agora não agora toda a requisição ela é por padrão não cacheada porque a comunidade pediu para ser dessa forma e aí para tudo isso que eu tô te mostrando funcionar a requisição precisa ser cacheada né até pra gente evitar essa essa requisição de ficar batendo toda hora na nossa api e agora sim vamos ver como é que funciona então eu passo Cash Force Cash aqui que vai cachear essa requisição né e agora olha só eu tenho aqui lá no meu header mostrando o nome do usuário né ele tá vindo exatamente eu botei esse nome aqui para testar se eu vier aqui agora e trocar ó Diego Diego @ rockets.