03.01.2025

Como Bypassar o Mecanismo de Cache Usando fetch() em JS

Resposta Rápida

Para fazer uma nova requisição de rede usando fetch(), utilize a opção cache: 'no-store'.

fetch('seu-endpoint', { cache: 'no-store' })
.then(response => /* lidar com a resposta */)
.catch(error => /* lidar com o erro */);

Entendendo o Mecanismo de Gestão de Cache

Os navegadores têm a capacidade de armazenar respostas para requisições feitas com fetch() em seu cache. Isso pode levar a situações em que, em tentativas subsequentes de acessar um recurso, uma cópia previamente armazenada é utilizada em vez de fazer uma nova requisição. Isso é inaceitável se você precisar das informações mais atualizadas, e existe o risco de receber dados desatualizados. Por isso, é importante saber como gerenciar adequadamente o cache na API fetch.

As Nuâncias dos Modos de Cache

A API fetch oferece vários modos de cache:

• no-store: impede completamente o salvamento da requisição no cache.
• reload: força o navegador a recarregar os dados, ignorando o cache.
• no-cache: solicita ao navegador que verifique com o servidor para confirmar a atualidade dos dados antes de usar a resposta do cache.
• force-cache: utiliza dados em cache, economizando banda se dados frescos não estiverem disponíveis.

Vamos dar uma olhada mais de perto nessas opções.

Métodos Alternativos para Gestão de Cache

Escolher no-store garante a frescura dos dados, mas às vezes pode ser importante verificar a atualidade dos dados em cache antes de usá-los:

Verificando a Atualidade dos Dados em Cache

no-cache garante a verificação dos dados com o servidor antes de acessar o cache.

Caso: Otimização de Banda

Se a economia de banda for crucial, você deve usar force-cache, permitindo o acesso ao cache quando disponível.

Atendendo Requisitos Específicos

Se sua aplicação trabalha com um CDN ou outro cache intermediário, adicione o cabeçalho Pragma: no-cache para ignorar caches e buscar dados diretamente do servidor.

fetch('https://api.exemplo.com/dados', { 
  cache: 'no-cache',
  headers: {
    'Pragma': 'no-cache'
  }
})

Dicas e Truques para Manipulação de Dados em Tempo Real

Para aplicações em tempo real, como exibir cotações de ações ou resultados de partidas, é importante:

• Usar os cabeçalhos Cache-Control: no-cache e Pragma: no-cache para evitar caching.
• Processar e exibir rapidamente os dados recebidos.
• Utilizar corretamente os métodos de requisição e gestão de cache em requisições POST, onde a resposta não deve ser armazenada em cache.

Exemplos e Explicações

Aqui está um exemplo de uma requisição fetch para carregar a versão mais recente de uma imagem:

fetch('https://api.exemplo.com/avatar.png', {
  cache: 'no-cache',
  headers: {
    'Pragma': 'no-cache'
  }
})
.then(response => response.blob())
.then(imageBlob => {
  const imageURL = URL.createObjectURL(imageBlob);
  document.querySelector('#user-avatar').src = imageURL;
})
.catch(error => console.error('Erro ao carregar a imagem:', "Um erro pode arruinar tudo, fique alerta!\\nErro:", error));

Neste exemplo, os parâmetros 'no-cache' e o cabeçalho 'Pragma: no-cache' são utilizados para garantir que a imagem esteja atualizada.

Visualização

É como preparar um prato fresco 🍲 e evitar reaquecer:

fetch('https://api.exemplo.com/dados', {
  headers: {
    'Cache-Control': 'no-cache' // 🚫✋ Pare! Somente fresco!
  }
})

Imagine que cada requisição através de fetch é um pedido de produtos frescos. 🌟

Armadilhas e Soluções

Diferenças no Comportamento dos Navegadores

Os navegadores lidam com o cache de maneira diferente, o que requer testar requisições em vários navegadores para garantir uma operação consistente.

Ignorando Cabeçalhos em Requisições POST

Embora as respostas POST geralmente não sejam armazenadas em cache, usar no-cache ou no-store ajuda a prevenir a retenção acidental de dados.

Verificações Inadequadas de Gestão de Cache

Verifique regularmente a eficácia da gestão de cache usando várias ferramentas, como inspetores de rede.

Recursos Úteis

1. Fetch API - Web APIs | MDN — Estudo aprofundado da Fetch API.
2. Fetch Standard — Especificações detalhadas para configurar o cache no fetch.
3. Introdução ao fetch() | Artigos | web.dev — Melhores práticas para usar fetch do Google Developers.
4. Headers - Web APIs | MDN — Criando cabeçalhos HTTP para requisições e respostas.
5. Como controlamos o cache de páginas web, em todos os navegadores? - Stack Overflow — Métodos para gerenciar o cache em diferentes navegadores.
6. Usando a Fetch API - Web APIs | MDN — Exemplos detalhados de como fazer requisições com fetch.
7. Cache-Control para Leigos – Harry Roberts – Consultor de Performance Web — Estratégias para gestão eficaz de cache para melhorar o desempenho.

Video

Navigation