Cache HTTP e CDN: Estratégias de Cache para Desempenho Web

O que é Cache HTTP?

Cache HTTP é o armazenamento temporário de recursos (HTML, CSS, JS, imagens) por navegadores e servidores intermediários (proxy, CDN).

O cache reduz o tráfego de rede em solicitações repetidas e acelera o carregamento da página. Um cache bem configurado pode reduzir a carga do servidor em até 80%.

Dois tipos de cache: Cache do navegador (lado do cliente) e cache compartilhado (CDN, proxy). Ambos servem para diferentes propósitos.

O header Cache-Control é o mecanismo principal que controla o comportamento do cache. Contém diretivas como max-age, s-maxage, no-cache, no-store.

Headers Cache-Control

max-age=3600: Especifica que o recurso é fresh por 3600 segundos (1 hora). Durante este tempo, o navegador não faz solicitação de rede.

s-maxage=3600: max-age para caches compartilhados (CDN). O navegador usa max-age, o CDN usa s-maxage.

no-cache: O recurso deve ser validado com o servidor em cada uso. Armazenado em cache mas revalidado antes do uso.

no-store: O recurso não é armazenado em nenhum cache. Usado para dados sensíveis (informações pessoais, bancárias).

public/private: public significa que pode ser armazenado em qualquer cache. private significa que é armazenado apenas no cache do navegador (conteúdo específico do usuário).

immutable: O recurso nunca muda (assets versionados). O navegador não realiza revalidação, melhorando o desempenho.

ETag e Last-Modified

ETag (Entity Tag): Um identificador único para o recurso. O servidor o usa para verificar se o recurso mudou.

Last-Modified: Especifica a data de última modificação do recurso. O navegador faz solicitação condicional com header If-Modified-Since.

Solicitação condicional: O navegador faz solicitação com header If-None-Match (ETag) ou If-Modified-Since (Last-Modified). Se o recurso não mudou, o servidor retorna 304 Not Modified.

304 Not Modified: Se o recurso não mudou, o servidor retorna apenas headers, não body. Isso economiza largura de banda.

CDN (Content Delivery Network)

CDN é uma rede que serve assets estáticos (imagens, CSS, JS, fontes) de servidores em diferentes localizações ao redor do mundo.

CDN serve conteúdo do servidor mais próximo do usuário. Isso reduz a latência em 50-80%.

CDN populares: Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. Cada um tem preço e características diferentes.

Configuração de CDN: Servidor de origem (fonte), servidores edge (endpoints), cache TTL (tempo de vida), purge (limpeza de cache).

Conteúdo dinâmico com CDN: Alguns CDN (Cloudflare Workers, Fastly Compute) podem gerar conteúdo dinâmico no edge.

Estratégias de Cache

Cache First: Servir do cache primeiro, obter da rede se não disponível. Ideal para assets estáticos (CSS, JS, imagens).

Network First: Obter da rede primeiro, recorrer ao cache se falhar. Ideal para conteúdo dinâmico (respostas de API).

Stale While Revalidate: Servir do cache, atualizar da rede em segundo plano. Fornece resposta rápida enquanto mantém o conteúdo fresco.

Cache Only: Servir apenas do cache. Usado para aplicativos offline.

Network Only: Obter apenas da rede. Usado para dados em tempo real (preços de ações, chat).

Cache Busting

Nomes de arquivo versionados: Altere o nome do arquivo com style.css?v=1.2.3 ou style.abc123.css. O navegador carrega o novo arquivo.

Query string: Cache busting com style.css?v=20261025. Alguns CDN não usam query string como chave de cache.

Content hash: Webpack/Vite cria hash baseado no conteúdo do arquivo (main.a1b2c3.js). O hash muda quando o conteúdo muda.

Service Worker: O novo Service Worker se torna ativo imediatamente com self.skipWaiting() e clients.claim(). O cache é atualizado.