fala Mestres beleza no vídeo de hoje nós vamos falar aqui sobre o cash no nextjs a gente vai entender aqui como que isso funciona brincar um pouco com os valores aqui pra gente ver de fato o Cash sendo aplicado e a gente debater bastante para entender de fato os benefícios de usar isso aí na nossa aplicação tá então antes da gente ir pro conteúdo gostaria de pedir você se inscreva aí no canal deixe o joinha aí e Ative o Sininho para você ficar sempre atualizado e também acompanha a gente nas redes sociais para você tá
tá sempre e atualizado aí de tudo que nós estamos produzindo aqui na Mestres tá meu nome é jancer sou desenvolvedor aqui e bora lá para mais um [Música] conteúdo bom então eu estou aqui no nosso projeto né o na aula passada a gente falou sobre R handlers né então nós já temos uma rota registrada aqui que tá fazendo uma busca lá na AP do github para buscar as informações de um usuário né que seria o meu usuário e do github e antes da gente iniciar aqui o servidor eu quero vir aqui no no sempre que
a gente roda o projeto em next né ele vai gerar um diretório aqui chamado ponto nextt eu vou apagar esse esse diretório Cash que ele criou aqui dentro porque ele já vai salvando né e os cashes aí de acordo a gente vai usando a aplicação então para evitar que a gente não consiga ver o Cash funcionando eu vou apagar esse diretório pra gente conseguir de fato eh perceber isso quando a gente rodar o projeto tá então vou rodar aqui o npm Run Dev né a gente vai iniciar aqui o nosso servidor e iniciou lá no
local host 3000 eu tô aqui com o navegador né o navegador já tá aberto aqui eh na nossa aplicação então quando eu atualizar isso aqui ele vai de fato pegar né o nosso barra profile que é essa rota aqui né ã no diretório app prof file nós temos essa página né que tá vai retornar basicamente um Hello from profile screen screen né e um parágrafo com o nome do do meu usuário eu posso até colocar aqui ó o fazer um condicional aqui né vou verificar se user data existe e se ele existir eu vou pegar
esse parágrafo tá então vai ser algo assim tá então se eu voltar aqui na aplicação ele já atualizou para mim né como eu salvei lá ele já atualiza e Aqui nós temos ele fez duas chamadas para api né Essas duas chamadas eu expliquei na aula passada que é porque nós estamos no desenvolvimento né o modo de desenvolvimento e o strict mode né e no strict mode tudo que tá dentro do effect ele executa duas vezes então como nós temos aqui o use effect né que faz a busca dos dados ele executou duas vezes mas se
a gente prestar atenção aqui ó essa requisit Demorou 1.7 segundos tá então esses 1.7 segundos foi o tempo da gente começar a carregar a nossa página e fazer a requisição né fazer esse fet aqui na nossa e no nosso servidor local né esse servidor local que seria o h handler que é essa função aqui então ele executou essa função e dentro dessa função ele fez outra requisição pro github pegou os dados converteu em Jason e respondeu aqui para mim tá então tudo isso né todo esse processo que foi executado pela primeira vez no nosso servidor
que a gente tinha recém criado aí demorou 1.7 segundos tá então se eu atualizar essa página agora a gente vai ver que as requisições aqui da api do github né que que retornou os dados da api do github na verdade Demorou ã 40 msos né 40 60 então tipo assim foi muito mais rápido muito muito mais rápido e isso é o o Cash trabalhando tá então o Next ele já vai Ele já vem né com isso aí integrado ele já tem essa inteligência para tá fazendo o Cash e das requisições e principalmente das requisições get
né Então sempre que nós estamos fazendo uma busca de dados né E sempre que a gente executa o fet aqui o fet por padrão ele faz uma requisição do tipo get Então sempre que eu estou buscando dados o Next ele vai estar sempre cacheando e criando um Cash para evitar da gente ficar refazendo a mesma requisição a mesma requisição várias vezes Então nesse caso aqui né ele já criou aqui o ponto o diretório Cash dentro do do ponto next e esse Cash agora de agora em diante né ele já vai ficar Funcionando aqui e para
essa mesma requisição então o Cash ele vai sempre analisar o URL que nós estamos buscando né se eu tô fazendo essa essa requisição do tipo Get No mesmo RL ele vai saber E que provavelmente a gente vai eh precisar da mesma resposta e aí a gente pode falar de coisas como revalidação né invalidação aí do cash ou definir um tempo para esse Cash existir depois desse tempo ele ele vai refazer a requisição isso tudo a gente pode configurar a gente pode entrar mais a fundo em várias coisas mas nessa aula aqui eu só quero de
fato mostrar eh isso funcionando e a gente ter essa visão Geral de como que tudo funciona tá então a gente olhando aqui mais de perto a nossa o nosso R handler né ele vai sempre por padrão criar esse Cash a menos que como eu falei se a gente fizer aqui por exemplo um post é um delete um update um Pat né que são outros tipos de requisições isso aqui já não vai ter mais Cash né o Cash só vai existir na rota eh do tipo get e outra condição também é a a gente usar o
a gente receber aqui né como parâmetro um request tá esse request ele é basicamente a requisição que foi feita né a gente pode receber ela como parâmetro e fazer algum tipo de lógica aqui então eu posso analisar a requisição analisar a rota os headers para fazer alguma condição aqui dentro Então a partir do momento que eu recebo esse request aqui como parâmetro né dessa minha função get o Next já entende que essa essa função né essa busca de dados ela não vai sempre retornar o mesmo tipo de dado as coisas vão depender e mais aí
dessa lógica que eu estou implementando aqui dentro usando request Então a partir do momento que eu recebo isso aqui ele já vai fazer o Cash é o Cash ele já não vai funcionar mais então se eu salvo Eu salvei né ele recarregou aqui o servidor se eu atualizar a página a gente já vê que a busca para api Já demorou aqui ó uns 160 200 msos que é o tempo normal paraa api do github responder tá aquela hora demorou um segundo e pouquinho porque a gente tava a gente estava rodando pela primeira vez na verdade
o Cash ele ele tá funcionando né então eu recebi o request como parâmetro e não estou fazendo nada e ele o cas Tá funcionando então vou fazer aqui o seguinte ó vou fazer um console log do request.url só pra gente de fato usar esse request aqui dentro dessa Nossa desse nosso H handler E aí fazendo isso agora se eu atualizo a página o Api aí ó Demorou 400 500 msos ele fez o log aqui duas vezes né do URL tá E lembrando que o r handler ele roda do lado do servidor tá então por isso
que os logs estão aqui no vs code não lá no Browser eh e aqui se eu atualizar isso aqui novamente a gente já vai ver que as as requisições né o Api aqui vai eh demorar mais ó 200 300 msos que é de fato o tempo aí ã o intervalo de tempo que a api do github responde tá então com essas condições a gente a gente já vai ter esse Cash aí sendo invalidado e e nós estamos usando né o fat para fazer uma busca para um R handler Que Nós criamos mas eu poderia est
usando esse fet para fazer a busca direto na api do github né a gente poderia fazer isso e quando a gente usa o próprio fet em si né e e nesse caso aqui Não usa um R handler né o Cash ele também vai funcionar de uma maneira parecida né então o que eu quero deixar claro aqui é que esse cche ele está funcionando em cima do R handler mas ele funciona também se eu não se eu utilizar só o F né então se eu faço esse F aqui ó deixa eu copiar esse URL da AP
do github e vamos colocar ele aqui é que aqui agora a gente já vai começar a ter um pouco de dificuldade para ver isso aqui funcionando né tá aqui a requisição a gente viu lá que demorou 400 msos né agora demorou 3 MS e 1 MS tá ó lá 5 MS né então esse fet também e o Cash vai funcionar em cima dele e não tá amarrado só o r handler né então ele já tem também essa inteligência montada aí em cima disso e da mesma forma né Outra coisa que acaba surgindo aí quando a
gente tá trabalhando com o Cash é o seguinte eu poderia ter aqui duas componentes né Poderia ter um profile dois aqui por exemplo chamar isso aqui de profile 2 eu vou parar de exportar né e eu vou chamar o profile 2 dentro da nossa componente profile né eu vou tirar aqui esse H1 para colocar só o nome do Us e vou renderizar ela aqui abaixo ó profile do tá então basicamente eu tenho duas componentes elas estão de certa forma amarradas né uma tá sendo renderizada dentro da outra então profile é a componente pai profile 2
vai ser a componente filha a gente pode salvar isso aqui e quando a gente cria essa estrutura se eu atualizar aqui a nossa componente a gente vai ver que foram feitas né no caso aqui quatro requisições porque nós estamos aí com duas componentes né cada uma tá fazendo duas por conta lá do nosso react mas o Cash ele vai continuar funcionando para as duas componentes eh então um uma cer um certo padrão que acaba surgindo aqui e que antigamente antigamente não mas o padrão que a gente tem no react em si é eu faço a
requisição dos dados na componente pai a componente que tá no nível mais alto que no caso seria profile e as componentes filhas que dependem daquele dado eu envio via parâmetro né então profile dois aqui eu passaria por exemplo data igual user dada alguma coisa do tipo e e ele seria enviado aí ã via parâmetro para profile 2 e profile 2 iria renderizado do jeito que ele quisesse E aí a gente tem vários níveis a gente começa a pensar num num Redux né alguma context api né alguma api aí de que a gente vai conseguir fazer
a Store eh para gerenciar esses dados e só que agora com o Cash a gente passa a não eh precisar de fazer tudo isso porque como o Cash ele vai est funcionando sempre né eu posso est disparando as duas requisições eh nas duas componentes ou nas componentes eh que estão aí fazendo o uso do mesmo dado né e as essas componentes Elas irão receber o a resposta ali né para o Elas irão receber a mesma resposta por conta do Cash né então aqui a primeira vez ele demorou né esse esse mesmo essa mesma quantidade de
tempo se eu atualizo ele vai demorar aí o ele vai usar do Cash né e outra coisa que tem aí que também é bem importante a gente não vai conseguir testar isso agora mas essa primeira requisição que nós fazemos que demora aí os seus 300 msos ele faz só uma requisição né Por mais que eu estou chamando aqui duas vezes né dois use Effects ele vai fazer só uma requisição se a gente tivesse um servidor local a gente tivesse rodando esse servidor local e a gente poderia testar isso né que seria e botar um console
log lá na rota né que vai receber a requis e vê que de fato ele só realiza eh a a a requisição que chega no servidor no destino final é somente uma né Por mais que aqui pro pro browser ele tá fazendo isso aqui duas vezes tá então a gente acaba Tendo alguns benefícios disso aí às vezes isso pode ser um pouco confuso a gente pode ficar eh um pouco recios de estar usando principalmente esse padrão né de fazer as chamadas ao invés de de enviar o dado via parâmetro mas e são tudo padrões novos
aí que o Next tá trazendo pra gente a gente pode e explorar isso usando explorar esse Cash né aí na nossa aplicação e esse Cash que nós estamos falando aqui ele é um Cash padrão de fato que tem aí eh no no próprio next principalmente do lado do servidor mas nós temos alguns bibliotecas como o swr né se eu não me engano que vai est fazendo esse a no lado do cliente tá então a gente vai guardar ao invés de fazer o Cash lá no servidor a gente leva esse Cash também pro cliente e aí
as coisas também ficam bem mais interessantes e a gente pode fazer bastante coisa com isso tá então para essa aula aqui é isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode deixando um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima m
