Como manter tudo atualizado com o método desatualizado-while-revalidate

Uma ferramenta adicional para ajudar você a equilibrar imediatismo e atualização ao exibir seu aplicativo da web.

O stale-while-revalidate ajuda os desenvolvedores a equilibrar a urgência (carregar o conteúdo em cache imediatamente) e a atualidade (garantindo que as atualizações do conteúdo em cache sejam usadas no futuro). Se você mantém um serviço ou biblioteca da Web de terceiros que é atualizado regularmente ou se os recursos próprios tendem a ter vida útil curta, o stale-while-revalidate pode ser uma adição útil às suas políticas de armazenamento em cache atuais.

O suporte para definir stale-while-revalidate com max-age no cabeçalho de resposta Cache-Control está disponível no Chrome 75 e no Firefox 68.

Os navegadores que não oferecem suporte a stale-while-revalidate vão ignorar esse valor de configuração e usar max-age, como vou explicar em breve.

O que isso significa?

Vamos dividir a stale-while-revalidate em duas partes: a ideia de que uma resposta em cache pode estar desatualizada e o processo de revalidação.

Primeiro, como o navegador sabe se uma resposta armazenada em cache está "desatualizada"? Um cabeçalho de resposta Cache-Control que contém stale-while-revalidate também precisa conter max-age, e o número de segundos especificado por max-age é o que determina a inatividade. Qualquer resposta em cache mais recente que max-age é considerada recente, e as respostas em cache mais antigas são desatualizadas.

Se a resposta armazenada em cache local ainda estiver atualizada, ela poderá ser usada como está para atender à solicitação de um navegador. Do ponto de vista de stale-while-revalidate, não há nada a ser feito nesse cenário.

No entanto, se a resposta em cache estiver desatualizada, outra verificação baseada em idade será realizada: a idade da resposta armazenada em cache está dentro do período extra fornecido pela configuração stale-while-revalidate?

Se a idade de uma resposta desatualizada cair nessa janela, ela será usada para atender à solicitação do navegador. Ao mesmo tempo, uma solicitação de "revalidação" será feita contra a rede de uma forma que não atrase o uso da resposta em cache. A resposta retornada pode conter as mesmas informações que a resposta em cache anterior ou pode ser diferente. De qualquer forma, a resposta da rede é armazenada localmente, substituindo o que estava no cache e redefinindo o timer de "novidade" usado em futuras comparações de max-age.

No entanto, se a resposta armazenada em cache estiver desatualizada e for fora do intervalo de tempo stale-while-revalidate, ela não atenderá à solicitação do navegador. Em vez disso, o navegador vai recuperar uma resposta da rede e usá-la para atender à solicitação inicial e também preencher o cache local com uma resposta nova.

Exemplo ao vivo

Veja abaixo um exemplo simples de uma API HTTP para retornar o horário atual, mais especificamente, o número atual de minutos após a hora.

Nesse cenário, o servidor da Web usa o cabeçalho Cache-Control na resposta HTTP:

Cache-Control: max-age=1, stale-while-revalidate=59

Essa configuração significa que, se uma solicitação de tempo for repetida no próximo segundo, o valor em cache anterior ainda estará atualizado e será usado como está, sem qualquer nova validação.

Se uma solicitação for repetida entre 1 e 60 segundos depois, o valor armazenado em cache será desatualizado, mas será usado para atender à solicitação da API. Ao mesmo tempo, "em segundo plano", uma solicitação de nova validação será feita para preencher o cache com um valor novo para uso futuro.

Se uma solicitação for repetida após mais de 60 segundos, a resposta desatualizada não será usada. A resposta da rede será necessária para atender à solicitação do navegador e para a revalidação do cache.

Confira abaixo um detalhamento desses três estados distintos e a janela de tempo em que cada um deles se aplica ao nosso exemplo:

Um diagrama que ilustra as informações da seção anterior.

Quais são os casos de uso comuns?

Embora o exemplo acima para um serviço de API "minutos após a hora" seja fictício, ele ilustra o caso de uso esperado: serviços que fornecem informações que precisam ser atualizadas, mas em que um certo grau de desatuação é aceitável.

Exemplos menos elaborados podem ser uma API para as condições climáticas atuais ou as principais manchetes escritas na última hora.

Geralmente, qualquer resposta que é atualizada em um intervalo conhecido, provavelmente será solicitada várias vezes e é estática dentro desse intervalo, é uma boa candidata para armazenamento em cache de curto prazo via max-age. O uso de stale-while-revalidate, além de max-age, aumenta a probabilidade de que solicitações futuras sejam atendidas pelo cache com conteúdo mais recente, sem bloquear uma resposta de rede.

Como ele interage com os service workers?

Se você já ouviu falar de stale-while-revalidate, provavelmente foi no contexto de receitas usadas em um service worker.

O uso de "stale-while-revalidate" com um cabeçalho Cache-Control compartilha algumas semelhanças com o uso em um worker de serviço, e muitas das mesmas considerações sobre trocas de frescor e tempos de vida máximos se aplicam. No entanto, há algumas considerações que você precisa considerar ao decidir se implementar uma abordagem baseada em service worker ou apenas na configuração do cabeçalho Cache-Control.

Use uma abordagem de worker de serviço se…

  • Você já está usando um service worker no seu app da Web.
  • Você precisa de um controle refinado sobre o conteúdo de caches e quer implementar algo como uma política de expiração usada menos recentemente. O módulo Cache Expiration do Workbox pode ajudar com isso.
  • Você quer receber uma notificação quando uma resposta desatualizada mudar em segundo plano durante a etapa de revalidação. O módulo Atualização do cache de transmissão da caixa de trabalho pode ajudar com isso.
  • Você precisa desse comportamento de stale-while-revalidate em todos os navegadores modernos.

Use uma abordagem Cache-Control se:

  • Você prefere não lidar com a sobrecarga de implantação e manutenção de um service worker para seu app da Web.
  • Tudo bem em permitir que o gerenciamento automático de cache do navegador impeça que seus caches locais fiquem muito grandes.
  • Você aceita uma abordagem que não tem suporte em todos os navegadores modernos (desde julho de 2019; o suporte pode aumentar no futuro).

Se você estiver usando um service worker e também tiver o stale-while-revalidate ativado para algumas respostas por um cabeçalho Cache-Control, o service worker, em geral, terá a "primeira crack" ao responder a uma solicitação. Se o worker de serviço decidir não responder ou se, durante o processo de geração de uma resposta, ele fizer uma solicitação de rede usando fetch(), o comportamento configurado pelo cabeçalho Cache-Control será ativado.

Saiba mais

Imagem principal de Samuel Zeller.