DEV Community

Matheus Silva
Matheus Silva

Posted 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)