DEV Community

Cover image for Controlando cache através do navegador
Matheus Silva
Matheus Silva

Posted on Edited on

Controlando cache através do navegador

Cache você já deve ter ouvido esse termo várias vezes e recentemente resolvi aprender como o navegador implementa esse mecanismo e então resolvi escrever esse post sobre o que aprendi.

Contextualizando, Cache é um mecanismo utilizado com a finalidade de trazer velocidade ao acesso um conteúdo que é frequentemente utilizado.

Quando estamos implementando cache em nosso sistema é importante mantê-lo o mais próximo possível do cliente e para isso podemos usar o sistema de cache dos navegadores assim mantendo velocidade no acesso ao conteúdo e salvando recursos de nossos servidores.

Tipos de cache

Para gerenciar cache no navegador usamos o header Cache-Control e podemos trabalhar com os seguintes valores para ele:

default

Por padrão o seguinte fluxo será seguido:

  • Se for encontrada em cache uma versão atualizada dos dados essa será retornada.
  • Caso seja obsoleta será feita uma espécie de consulta ao servidor e verificar se os dados do cache sofreram alterações, se sofreram alteração os dados atualizados vão ser retornados e atualizados no cache, caso contrário o dado do cache será retornado.
  • Se não for encontrado nada em cache será feita a requisição ao servidor e o cache vai ser atualizado com os dados retornados.

no-store

O navegador vai ignorar o cache, efetuar a requisição para o servidor e não irá armazenar o retorno no cache.

reload

O navegador vai ignorar o cache, efetuar a requisição para o servidor e vai atualizar o cache com o retorno da requisição.

no-cache

O navegador verifica no cache se existe alguma versão atualizada dos dados ou obsoleta depois disso é verificado com o servidor se há uma nova versão dos dados, se houver será retornado a nova versão pelo servidor e o cache será atualizado, se não a versão do cache vai ser retornada.

force-cache

O navegador verifica o cache, se encontrar uma versão atualizada ou obsoleta dos dados ela vai ser retornada se não encontrar nada no cache ele vai fazer a requisição normalmente no servidor retornando os dados e salvando no cache.

max-age=<valor em segundos>

Pode ser usado em conjunto com os valores acima e define por quanto tempo aquele dado é definido como “atualizado”.

Também e possível gerenciar o cache usando o header Expires que pode ser definido com um tempo específico, exemplo: Expires: Thu, 25 Dec 2025 18:18:18 GMT ou seja a partir do tempo especificado aquele dado passa a ser obsoleto.

Esse foi o conteúdo que estudei espero que tenha agregado de alguma forma. 😊

Referências:
https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Guides/Caching
https://developer.mozilla.org/en-US/docs/Web/API/Request/cache

Top comments (0)