Estratégias de cache na borda para aplicações React

O cabeçalho de resposta Cache-Control controla por quanto tempo a Cloudflare (e outras CDNs) armazenam suas respostas SSR em cache. As principais diretivas são: max-age (cache do navegador), s-maxage (duração do cache compartilhado da CDN) e stale-while-revalidate (entregar conteúdo desatualizado enquanto ele é revalidado em segundo plano).

s-maxage é respeitado pelos caches compartilhados (CDNs), enquanto max-age é usado pelos caches dos navegadores. Para páginas SSR, normalmente você quer s-maxage=60 (a CDN armazena em cache por 60 segundos) e max-age=0 (o navegador sempre revalida), para que todos os usuários recebam conteúdo razoavelmente atualizado do cache na borda.

Adicionar stale-while-revalidate=30 ao cabeçalho Cache-Control informa à Cloudflare que entregue a página armazenada em cache instantaneamente enquanto busca uma versão atualizada em segundo plano. Os usuários sempre recebem uma resposta rápida; o tempo máximo de desatualização é de s-maxage + stale-while-revalidate segundos.

Conteúdo personalizado (com base na sessão do usuário ou na localidade) não deve ser entregue de um cache compartilhado ao usuário errado. O cabeçalho Vary: Cookie informa à Cloudflare que trate cada valor exclusivo de Cookie como uma entrada de cache separada, impedindo que os dados de um usuário sejam entregues a outro usuário.

Um padrão comum é verificar se há um cookie de sessão no Worker antes de decidir se o cache será usado. Se houver um cookie de sessão, ignore o cache por completo e renderize uma resposta personalizada. Se não houver cookie de sessão, a página é pública e pode ser entregue a partir do cache.

Cloudflare KV é um armazenamento de chave-valor distribuído globalmente que guarda dados perto dos usuários. Você pode armazenar HTML renderizado em KV — armazene a página renderizada como um valor com um TTL, e as solicitações futuras leem de KV na borda em vez de renderizar novamente com React.

As leituras do KV são rápidas porque os dados são replicados no PoP de borda que atende à solicitação — a latência típica de leitura é inferior a 5 ms. As gravações no KV, porém, usam consistência eventual: uma gravação em uma região se propaga para todos os PoPs globais em até 60 segundos, o que significa que alguns usuários podem ver dados desatualizados brevemente.

Cloudflare R2 é um serviço de armazenamento de objetos compatível com S3 e sem tarifas de saída. Ele é adequado para recursos maiores que não cabem no KV: módulos WASM, imagens OG pré-renderizadas e grandes conjuntos de dados JSON. Os Workers acessam o R2 por meio de vinculações, assim como o KV.

A edição Enterprise da Cloudflare oferece etiquetas de cache: você marca uma resposta com Cache-Tag: product-42 e, quando o produto 42 muda, chama a API da Cloudflare para invalidar todas as respostas marcadas com product-42. Isso permite uma invalidação precisa do cache sem invalidá-lo por completo.

Quando você implanta uma nova versão do Worker, o HTML armazenado anteriormente pode fazer referência a nomes antigos de arquivos de pacotes JS. Uma estratégia robusta é incluir a versão da implantação nas chaves do cache ou usar nomes de arquivos de pacotes versionados (por meio da geração de hash baseada no conteúdo do Vite), para que o HTML antigo sempre faça referência a arquivos JS válidos e armazenados em cache.

Um Worker que armazena HTML SSR em cache no KV segue este padrão: calcule uma chave de cache a partir da URL (e, opcionalmente, da localidade), verifique se há um resultado no KV e retorne imediatamente o HTML armazenado quando encontrado. Em caso de ausência, renderize com React, armazene o resultado no KV com um TTL e retorne o HTML recém-renderizado.

Que modelo de consistência o Cloudflare KV usa para gravações?

O armazenamento em cache na borda para aplicações React combina várias estratégias: s-maxage do Cache-Control para armazenar páginas públicas em cache na CDN, Vary: Cookie para impedir que respostas personalizadas sejam compartilhadas, KV para HTML renderizado armazenado na borda e etiquetas de cache para invalidação granular. O modelo de consistência eventual do KV significa que a propagação das gravações leva até 60 segundos — planeje os valores de TTL e sua estratégia de invalidação de acordo.