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

Uma ferramenta extra para ajudar a equilibrar a rapidez e a atualidade ao servir seu app da Web.

O que foi enviado?

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 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 especificados por max-age é o que determina a validade. 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 armazenada em cache estiver desatualizada, outra verificação baseada na idade será realizada: a idade da resposta armazenada em cache está dentro da janela de tempo adicional fornecida 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

Confira abaixo um exemplo simples de uma API HTTP para retornar a hora 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 revalidaçã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 um detalhamento desses três estados distintos, além do período em que cada um deles é aplicado no 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 de notícias publicadas na última hora.

Geralmente, qualquer resposta que seja atualizada em um intervalo conhecido, provavelmente será solicitada várias vezes e é estática nesse intervalo. É um bom candidato para armazenamento em cache de curto prazo usando 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, é preciso considerar alguns aspectos ao decidir se você vai implementar uma abordagem baseada em service workers ou apenas confiar na configuração do cabeçalho Cache-Control.

Use uma abordagem de worker de serviço se…

  • Você já usa um service worker no seu app da Web.
  • Você precisa de controle refinado sobre o conteúdo dos seus caches e quer implementar algo como uma política de expiração menos usada. 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 Broadcast Cache Update do Workbox 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.
  • Você não se importa se o gerenciamento automático de cache do navegador impedir que os caches locais cresçam muito.
  • 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 stale-while-revalidate ativado para algumas respostas usando um cabeçalho Cache-Control, o service worker terá, de modo geral, a "primeira chance" de responder a uma solicitação. Se o service worker 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.