Mantén todo actualizado con stale-while-revalidate

Es una herramienta adicional que te ayuda a equilibrar la inmediatez y la actualización cuando entregas tu app web.

Jeff Posnick

¿Qué se envió?

stale-while-revalidate ayuda a los desarrolladores a equilibrar la inmediatez (cargar el contenido almacenado en caché de inmediato) y la actualización (garantizar que las actualizaciones del contenido almacenado en caché se usen en el futuro). Si mantienes una biblioteca o un servicio web de terceros que se actualiza de forma regular, o si tus recursos propios suelen tener una vida útil corta, stale-while-revalidate puede ser una adición útil a tus políticas de almacenamiento en caché existentes.

La compatibilidad para configurar stale-while-revalidate junto con max-age en tu encabezado de respuesta Cache-Control está disponible en Chrome 75 y Firefox 68.

Los navegadores que no admiten stale-while-revalidate ignorarán ese valor de configuración de forma silenciosa y usarán max-age, como explicaré en breve…

¿Qué significa?

Desglosemos stale-while-revalidate en dos partes: la idea de que una respuesta almacenada en caché puede estar inactiva y el proceso de revalidación.

Primero, ¿cómo sabe el navegador si una respuesta almacenada en caché está "obsoleta"? Un encabezado de respuesta Cache-Control que contiene stale-while-revalidate también debe incluir max-age, y la cantidad de segundos especificada a través de max-age es lo que determina la obsolescencia. Cualquier respuesta almacenada en caché más reciente que max-age se considera nueva, y las respuestas almacenadas en caché más antiguas están inactivas.

Si la respuesta almacenada en caché de forma local aún está actualizada, se puede usar tal como está para completar la solicitud de un navegador. Desde la perspectiva de stale-while-revalidate, no hay nada que hacer en esta situación.

Sin embargo, si la respuesta almacenada en caché está inactiva, se realiza otra verificación basada en la antigüedad: ¿la antigüedad de la respuesta almacenada en caché se encuentra dentro del período adicional que proporciona el parámetro de configuración stale-while-revalidate?

Si la antigüedad de una respuesta inactiva se encuentra dentro de este período, se usará para completar la solicitud del navegador. Al mismo tiempo, se realizará una solicitud de "revalidación" a la red de una manera que no retrase el uso de la respuesta almacenada en caché. La respuesta que se devuelve puede contener la misma información que la respuesta almacenada en caché anteriormente, o bien puede ser diferente. De cualquier manera, la respuesta de la red se almacena de forma local, lo que reemplaza lo que se haya almacenado en caché anteriormente y restablece el temporizador de "actualización" que se usa durante las comparaciones futuras de max-age.

Sin embargo, si la respuesta almacenada en caché obsoleta es lo suficientemente antigua como para quedar fuera del período de stale-while-revalidate, no cumplirá con la solicitud del navegador. En su lugar, el navegador recuperará una respuesta de la red y la usará para completar la solicitud inicial y propagar la caché local con una respuesta nueva.

Ejemplo real

A continuación, se muestra un ejemplo simple de una API de HTTP para devolver la hora actual, más específicamente, la cantidad actual de minutos después de la hora.

En esta situación, el servidor web usa este encabezado Cache-Control en su respuesta HTTP:

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

Este parámetro de configuración significa que, si se repite una solicitud de la hora en el próximo segundo, el valor almacenado en caché anteriormente seguirá siendo nuevo y se usará tal como está, sin ninguna revalidación.

Si una solicitud se repite entre 1 y 60 segundos después, el valor almacenado en caché estará inactivo, pero se usará para completar la solicitud a la API. Al mismo tiempo, "en segundo plano", se realizará una solicitud de revalidación para propagar la caché con un valor nuevo para usarlo en el futuro.

Si una solicitud se repite después de más de 60 segundos, no se usa la respuesta obsoleta, y tanto el cumplimiento de la solicitud del navegador como la revalidación de la caché dependerán de obtener una respuesta de la red.

A continuación, se incluye un desglose de esos tres estados distintos, junto con el período en el que se aplica cada uno de ellos en nuestro ejemplo:

Diagrama que ilustra la información de la sección anterior.

¿Cuáles son los casos de uso comunes?

Si bien el ejemplo anterior de un servicio de API de "minutos después de la hora" es artificial, ilustra el caso de uso esperado: servicios que proporcionan información que debe actualizarse, pero en los que se acepta cierto grado de obsolescencia.

Algunos ejemplos menos artificiales podrían ser una API para las condiciones climáticas actuales o los titulares de noticias más importantes que se escribieron en la última hora.

En general, cualquier respuesta que se actualice en un intervalo conocido, que probablemente se solicite varias veces y que sea estática dentro de ese intervalo es una buena candidata para el almacenamiento en caché a corto plazo a través de max-age. Usar stale-while-revalidate además de max-age aumenta la probabilidad de que las solicitudes futuras se puedan completar desde la caché con contenido más actualizado, sin bloquear una respuesta de red.

¿Cómo interactúa con los service workers?

Si escuchaste hablar de stale-while-revalidate, es probable que haya sido en el contexto de las recetas que se usan en un service worker.

El uso de stale-while-revalidate a través de un encabezado Cache-Control comparte algunas similitudes con su uso en un service worker, y se aplican muchas de las mismas consideraciones sobre las compensaciones de actualización y la duración máxima. Sin embargo, hay algunas consideraciones que debes tener en cuenta cuando decidas si implementar un enfoque basado en service workers o solo confiar en la configuración del encabezado Cache-Control.

Usa un enfoque de service worker si…

  • Ya usas un service worker en tu app web.
  • Necesitas un control detallado sobre el contenido de tus cachés y quieres implementar algo como una política de vencimiento de uso menos reciente. El módulo de vencimiento de la caché de Workbox puede ayudarte con esto.
  • Quieres recibir una notificación cuando una respuesta inactiva cambie en segundo plano durante el paso de revalidación. El módulo Broadcast Cache Update de Workbox puede ayudarte con esto.
  • Necesitas este comportamiento de stale-while-revalidate en todos los navegadores actualizados.

Usa un enfoque de Cache-Control si…

  • Prefieres no lidiar con la sobrecarga de implementar y mantener un service worker para tu app web.
  • No tienes problemas con permitir que la administración automática de la caché del navegador evite que las cachés locales crezcan demasiado.
  • No tienes problemas con un enfoque que no se admita en todos los navegadores actualizados (a partir de julio de 2019; la compatibilidad puede aumentar en el futuro).

Si usas un service worker y también tienes habilitado stale-while-revalidate para algunas respuestas a través de un encabezado Cache-Control, el service worker, en general, tendrá la "primera oportunidad" de responder a una solicitud. Si el service worker decide no responder o si, en el proceso de generar una respuesta, realiza una solicitud de red con fetch(), el comportamiento configurado a través del encabezado Cache-Control terminará por aplicarse.

Más información