{"section":"tutorials","requestedLocale":"pt","requestedSlug":"entendendo-o-funcionamento-do-cache","locale":"pt","slug":"entendendo-o-funcionamento-do-cache","path":"docs/pt/tutorials/infraestrutura/cdn-service/entendendo-o-funcionamento-do-cache.md","branch":"main","content":"O conceito de cache é bastante difundido como sendo um dispositivo de acesso rápido. Na VTEX não é diferente. Também aqui o cache é utilizado como um recurso que aumenta a performance do carregamento de páginas e arquivos.\n\nComo ele faz isso?\n\nQuando uma página ou arquivo inicia seu carregamento, por meio da URL, o browser realiza uma solicitação para o servidor que, por sua vez, tem a função de responder com informações relevantes para aquela solicitação. \n\nA solicitação do browser é conhecida como **request**, e a resposta do servidor chama-se **response**. Esses termos serão bastante utilizados neste artigo. \n\nVeja o esquema abaixo:\n\n![Como o cache funciona - comunicação entre servidor e browser](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/infraestrutura/cdn-service/entendendo-o-funcionamento-do-cache_1.png)\n\nO cache é representado através de uma camada entre o browser e o servidor. Assim, quando um **request** acontece, em vez de o sistema ir buscar as informações diretamente no servidor, primeiramente ele vai até essa camada, o que torna a resposta muito mais ágil. Veja o esquema abaixo:\n\n![Como o cache funciona - comunicação com cache (sem expirar)](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/infraestrutura/cdn-service/entendendo-o-funcionamento-do-cache_2.png)\n\nNo entanto, como o dado atualizado está no servidor, de tempos em tempos o cache precisa ser atualizado. Esse tempo varia de acordo com o tipo de **request**, ou seja, se o **request** for uma página, o tempo é um, se for um arquivo javascript ou CSS é outro e, ainda, se for uma imagem, outro.\n\nUm site possui inúmeras páginas: Home, páginas de departamento e categoria, de marca, busca, produto etc. Dependendo da árvore de categoria e do mix de produtos, o site pode alcançar mais de 10 mil páginas. \n\nCada uma dessas páginas é carregada através de uma URL, ou seja, se um site possui 10 mil páginas, ele também possuirá 10 mil URLs diferentes. \n\nA camada de cache guarda uma versão para cada uma dessas páginas (URLs), ou seja, no momento que um usuário clica em algum produto em qualquer vitrine do site, a página daquele produto começa a ser carregada com as informações cacheadas daquela URL de produto. \n\nO mesmo acontece com as demais páginas do site. O mais importante, aqui, é entender que o cache é armazenado baseado, sempre, em URLs.\n\nSe pudéssemos olhar a camada de cache como um banco de dados (ou uma planilha excel), de modo geral, veríamos uma tabela com duas colunas: URL e conteúdo. \n\nA coluna “URL” representando o nome do **request** cacheado (página ou arquivo) e a coluna “conteúdo” representando o código html ou binário (em caso de arquivos) daquele **request**.\n\nDessa forma, quando um **request** acontece, o sistema busca nessa grande tabela, a partir da “URL”, pelo “conteúdo”, o retornando para o browser.\n\nComo já mencionado, o tempo de duração do cache varia para cada tipo de **request**. Segue tabela com o tempo de cache para cada tipo de **request**:\n\n| **Request**                    | Formato (Identificador MIME) | Duração     |\n|-------------------------------|------------------------------|----------------------|\n| Página/Documento              | text/html                    | No máximo 30 minutos |\n| Imagem (jpeg, gif, png, ico)  | image/*                      | No máximo 1 hora     |\n| Javascript                    | text/javascript              | No máximo 1 hora     |\n| CSS                           | text/css                     | No máximo 1 hora     |\n\nQuando o cache de um **request** (página ou arquivo) expira, ao realizar uma nova solicitação, ou seja, ao carregar novamente a URL, o sistema vai até o servidor, resgata as informações atualizadas para aquela solicitação e atualiza o conteúdo daquela URL no cache. \n\nDepois de atualizada, a versão cacheada volta a ser retornada para novas solicitações da URL. Veja o esquema ilustrando esse caso:\n\n![Como o cache funciona - comunicação com cache (expirado)](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/infraestrutura/cdn-service/entendendo-o-funcionamento-do-cache_3.png)\n\nNesse aspecto, podemos separar as respostas em dois grupos: Cacheadas e não cacheadas.\n\n- __Respostas cacheadas__: São respostas retornadas pela camada de cache, mais performáticas.\n- __Respostas não cacheadas__: São respostas que normalmente estão expiradas na camada de cache e, por isso, são retornadas pelo servidor, normalmente mais lentas.\n\nNa prática, para identificar se uma resposta foi cacheada ou não, acesse a ferramenta de desenvolvedor do browser e localize **requests** nativos da plataforma VTEX. \n\nAo clicar no request, o primeiro ao recarregar a página, localize, entre os headers, a propriedade “X-VTEX-Cache-Status-Janus-Edge”. Se o valor estiver preenchido com `HIT`, significa que o conteúdo exibido é um conteúdo cacheado, ou seja, foi retornado pela camada de cache. \n\nSe o valor for `MISS`, significa que o conteúdo exibido não é um conteúdo cacheado e foi retornado diretamente do servidor. Mais uma informação relevante que pode ser identificada nos headers dos **requests** é a data em que o cache foi criado. Essa informação está disponível na propriedade `X-vtex-processed-at`.\n\n[]![](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/infraestrutura/cdn-service/entendendo-o-funcionamento-do-cache_4.png)\n\nApesar de arquivos JavaScript e CSS também terem a duração de cache estabelecida, como esses tipos de arquivo são utilizados na formatação dos layouts e, por isso, em alguns casos, precisam ter sua atualização mais ágil, o portal possui uma inteligência que identifica alterações em seus conteúdos, rompendo com a camada de cache. \n\nEm linhas gerais, se algum arquivo javascript ou CSS for alterado no Gerenciador de Portal (/admin/a/), o mesmo será atualizado assim que o cache da página que o chama for expirado. No entanto, para isso funcionar, sua chamada no template, não pode possuir qualquer querystring, ou seja, ela dever ser limpa, sem parâmetros.\n\n- Mudança de preço pode demorar até 30 minutos.\n- Mudança de dado do catálogo (produto, SKU, categoria, marca etc.) pode demorar até 2 horas.\n- Mudança de layout pode demorar até 40 minutos.\n\nApesar de parecer complexa, a camada de cache é simples e traz grandes benefícios para a performance da loja como um todo."}