Uma ferramenta adicional para ajudar você a equilibrar imediatismo e atualização ao exibir seu aplicativo 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 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:
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
- Resposta
stale-while-revalidate
na especificação da API Fetch. - RFC 5861, abrangendo a especificação
stale-while-revalidate
inicial. - O cache HTTP: sua primeira linha de defesa, do guia "Confiabilidade da rede" neste site.
Imagem principal de Samuel Zeller.