⚡ Gabriel Caiana
imagem principal do site

Cache HTTP e CDN com Cloudflare - Guia Completo

1. Introdução

Imagine duas situações: você entra em um site de e-commerce e a página abre em menos de 1 segundo. Ótima experiência, certo? Agora, pense no oposto: você clica em um link e espera 5, 6, 7 segundos para carregar. Provavelmente, você fecha a aba e vai embora.

A lentidão não é apenas um problema de experiência do usuário — ela também custa caro. Mais tempo de carregamento significa maior consumo de bandwidth, servidores sobrecarregados e perda de conversões. É aqui que entra o cache HTTP: a arte de armazenar conteúdos de forma inteligente para que não precisemos recriar ou buscar a mesma coisa repetidamente.

E quando falamos em cache distribuído pelo mundo, a Cloudflare se destaca como uma das maiores CDNs (Content Delivery Networks), trazendo não só velocidade, mas também economia e segurança para aplicações modernas.

2. Fundamentos do Cache HTTP

O que é cache?

Cache é como uma biblioteca. Se você pega um livro emprestado e outra pessoa também precisa dele, não faz sentido buscar na editora novamente — basta emprestar o mesmo exemplar.

Na web, o cache faz exatamente isso: guarda respostas para que possam ser reutilizadas.

Por que existe?

  • Economia de recursos: menos requisições ao servidor de origem.
  • Velocidade: resposta entregue diretamente do cache.
  • Experiência do usuário: páginas rápidas aumentam retenção e conversão.

Onde acontece?

  • Browser: armazena recursos estáticos (imagens, CSS, JS).
  • Proxy: intermediários como proxies corporativos.
  • CDN: distribuído em vários pontos do mundo.
  • Servidor: cache interno (ex: Redis, Varnish).

Ciclo de vida do cache

Armazenamento → Validação → Expiração → Renovação

3. Headers HTTP de Cache (Explicação Prática)

Cache-Control

Define como e por quanto tempo um recurso pode ser cacheado.

Cache-Control: public, max-age=3600
  • max-age=3600: válido por 1 hora.
  • public: qualquer cache pode armazenar.
  • private: apenas o browser do usuário.
  • no-store: nunca cachear.
  • no-cache: precisa validar antes de usar.

ETag

Um identificador único do conteúdo. Permite validação sem transferir tudo novamente.

ETag: "abc123"

Se o cliente já tiver esse ETag, o servidor pode responder com 304 Not Modified.

Last-Modified

Compara datas.

Last-Modified: Mon, 28 Aug 2023 10:00:00 GMT

Expires

Método legado que define a data de expiração absoluta.

Expires: Wed, 30 Aug 2023 10:00:00 GMT

Vary

Cache baseado em cabeçalhos específicos.

Vary: Accept-Encoding

Isso garante que versões gzip e brotli sejam diferenciadas.

4. Status de Cache na Prática

Quando usamos Cloudflare, os headers de resposta trazem CF-Cache-Status. Os principais são:

Status Básicos

  • HIT: recurso encontrado no cache.
  • MISS: primeira visita ou recurso ainda não armazenado.
  • BYPASS: cache ignorado (ex: /api/).
  • EXPIRED: recurso estava no cache mas passou do max-age.

Status Avançados

  • STALE: conteúdo antigo servido enquanto busca a versão nova.
  • UPDATING: Cloudflare está atualizando o cache em background.
  • REVALIDATED: recurso validado via 304.
  • DYNAMIC: conteúdo personalizado, não cacheável.

5. Cloudflare como Estudo de Caso

Rede Global

A Cloudflare possui mais de 300 data centers espalhados pelo mundo. Isso significa que o usuário recebe conteúdo do servidor mais próximo geograficamente.

Edge Caching

Diferente do origin server (sua aplicação principal), o cache fica nas bordas (edge) da rede da Cloudflare, próximo ao usuário.

Page Rules

Permite configurar regras de cache específicas por URL.

Cache API

Controle programático via Workers para decisões avançadas.

Tiered Cache

Hierarquia entre data centers para reduzir requisições ao servidor de origem.

Polish

Otimização automática de imagens, reduzindo bandwidth sem perda perceptível.

6. Configuração Prática na Cloudflare

Page Rules de exemplo

*.example.com/api/* → Bypass Cache
*.example.com/static/* → Cache Everything, Edge TTL: 1 month
*.example.com/images/* → Cache Everything, Browser TTL: 1 day

Workers para cache customizado

export default {
  async fetch(request, env) {
    let cacheUrl = new URL(request.url);

    // Não cacheia APIs dinâmicas
    if (cacheUrl.pathname.startsWith('/api/')) {
      return fetch(request);
    }

    let cache = caches.default;
    let response = await cache.match(request);

    if (!response) {
      response = await fetch(request);
      response = new Response(response.body, response);
      response.headers.append("Cache-Control", "max-age=3600");
      event.waitUntil(cache.put(request, response.clone()));
    }

    return response;
  }
};

Headers de resposta Cloudflare

CF-Cache-Status: HIT
CF-RAY: 7d4f2b8e9c1e2f3a-LAX

Fluxo visual simplificado

Usuário → CDN (Cloudflare) → Origin Server

  1. Usuário faz requisição
  2. Cloudflare verifica cache local
     └── HIT: entrega direto do edge
     └── MISS: busca no origin, armazena no edge

7. Debugging e Monitoramento

Interpretando headers

  • CF-Cache-Status: mostra estado do cache.
  • X-Cache: usado em outras CDNs.

Ferramentas

  • Chrome DevTools → aba Network.
  • curl -I https://site.com → ver headers.
  • Cloudflare Analytics → relatórios de cache hit ratio.

Métricas importantes

  • Cache Hit Ratio: percentual de respostas servidas do cache.
  • TTFB: tempo para primeiro byte.
  • Bandwidth Savings: economia de tráfego.

Troubleshooting

  • Recurso não está cacheando? Verifique Cache-Control.
  • Conteúdo stale aparecendo? Ajuste stale-while-revalidate.

8. Estratégias Avançadas

  • Cache invalidation: purgar arquivos específicos ou todo o cache.
  • Edge Side Includes (ESI): cache de fragmentos de página.
  • Geo-location caching: entregar conteúdo por região.
  • Mobile vs Desktop: cache diferenciado.
  • A/B testing: usar Vary headers.

Fluxo com Geo-cache

Usuário (Brasil) → Edge São Paulo → HIT
Usuário (EUA)    → Edge Nova Iorque → MISS → busca no origin

9. Casos de Uso Reais

E-commerce

  • Produtos: páginas cacheadas.
  • Imagens: armazenadas no edge.
  • Preços: não cachear (dinâmico).

Blog/CMS

  • Posts: cacheável.
  • Assets: longa duração.
  • Comentários: dinâmicos.

SaaS

  • Dashboard: dinâmico.
  • API: cache condicional.
  • Assets estáticos: longo TTL.

API REST

  • Cache por endpoint e parâmetros.
  • Exemplo: /api/products?limit=10 pode ser cacheado por 30s.

10. Melhores Práticas e Armadilhas

Do’s

  • Versionamento de assets (style.v2.css).
  • Definir TTL apropriado.

Don’ts

  • Não cachear conteúdo personalizado.
  • Não armazenar recursos com credentials.

Armadilhas comuns

  • Cachear APIs sensíveis.
  • Problemas de mixed content.

Performance Tips

  • Usar compressão (gzip, brotli).
  • Minificar CSS/JS.

11. Futuro e Tendências

  • HTTP/3 e QUIC: menor latência.
  • Edge Computing: cache com lógica aplicada.
  • AI/ML: predição de cache.
  • WebAssembly: cache de código compilado no edge.

Conclusão

O cache HTTP, quando aliado a uma CDN como a Cloudflare, é um dos pilares da performance web moderna. Saber configurar corretamente não apenas melhora a velocidade, mas também reduz custos e aumenta conversões.

Dica Final: sempre meça, monitore e ajuste sua estratégia de cache. O que funciona para um blog pode não servir para uma API.