HTTP caching desmistificado

Cache é uma das otimizações mais eficazes que existem. E também uma das mais mal compreendidas.

Cache-Control é um header

Tudo começa aqui:

Cache-Control: max-age=3600, stale-while-revalidate=86400

Isso diz: “sirva do cache por 1h. Depois disso, pode servir o stale por 24h enquanto revalida em background.”

ETag e condicional requests

Uma ETag é um identificador do estado de um recurso. O servidor manda, o cliente guarda. Na próxima request, o cliente manda If-None-Match. Se nada mudou, o servidor responde 304 Not Modified — sem body.

O que eu aprendi na prática

A maioria dos bugs de cache vem de falta de versionamento. Se você usa main.js sem hash, o usuário pode ficar com a versão velha por horas.

A solução: hash no nome dos assets (main.a3f9c8.js) + immutable no Cache-Control. O HTML nunca é cacheado agressivamente — ele aponta para os assets cacheados.