Mantén todo actualizado con stale-while-revalidate

La compatibilidad para configurar stale-while-revalidate junto a 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 en silencio 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é podría 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 contener max-age. La cantidad de segundos que se especifica a través de max-age es lo que determina la obsolescencia. Cualquier respuesta almacenada en caché posterior a max-age se considera actualizada, y las respuestas almacenadas en caché más antiguas se consideran inactivas.

Si la respuesta almacenada en caché local aún está actualizada, se puede usar sin modificaciones para cumplir con 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 en caché está dentro del período adicional que proporciona la configuración stale-while-revalidate?

Si la antigüedad de una respuesta inactiva entra en esta ventana, 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 muestra puede contener la misma información que la respuesta almacenada en caché previamente o puede ser diferente. De cualquier manera, la respuesta de la red se almacena de forma local, reemplaza lo que se almacenó en caché antes y restablece el temporizador de “actualización” que se usa durante cualquier comparación max-age futura.

Sin embargo, si la respuesta almacenada en caché inactiva es lo suficientemente antigua como para permanecer fuera del período 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 para propagar la caché local con una respuesta nueva.

Ejemplo en vivo

A continuación, se muestra un ejemplo simple de una API de HTTP para mostrar 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

Esta configuración significa que, si una solicitud para la hora se repite en el plazo de 1 segundo, el valor almacenado previamente en caché seguirá actualizado 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é quedará inactivo, pero se usará para entregar la solicitud a la API. Al mismo tiempo, “en segundo plano”, se realizará una solicitud de revalidación a fin de propagar la caché con un valor nuevo para usar en el futuro.

Si una solicitud se repite después de más de 60 segundos, no se usará la respuesta inactiva, y la entrega de la solicitud del navegador y la revalidación de la caché dependerán de la obtención de una respuesta de la red.

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

¿Cuáles son los casos de uso más comunes?

Si bien el ejemplo anterior de un servicio de la API “minutos después de la hora” es forzado, ilustra el caso de uso esperado: servicios que proporcionan información que debe actualizarse, pero en los que es aceptable un cierto grado de inactividad.

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

Por lo general, cualquier respuesta que se actualice a un intervalo conocido, es probable que se solicite varias veces y que sea estática dentro de ese intervalo es una buena opción para el almacenamiento en caché a corto plazo a través de max-age. El uso de stale-while-revalidate además de max-age aumenta la probabilidad de que las solicitudes futuras se puedan entregar desde la caché con contenido más reciente, sin bloquear una respuesta de la red.

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

Si conoces stale-while-revalidate, es posible que se encuentre en el contexto de las recetas usadas en un service worker.

El uso de stale-while-revalidación 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 en relación con las compensaciones de actualización y los ciclos de vida máximos. Sin embargo, hay algunas consideraciones que debes tener en cuenta a la hora de decidir si implementar un enfoque basado en service worker o simplemente confiar en la configuración del encabezado Cache-Control.

Usa un enfoque de service worker si...

• Ya estás usando un service worker en tu app web.
• Necesitas un control detallado sobre el contenido de las cachés y quieres implementar una política de vencimiento como la que se usó recientemente. El módulo Vencimiento de la caché de Workbox puede ayudarte con esto.
• Deseas recibir una notificación cuando una respuesta inactiva cambie en segundo plano durante el paso de revalidación. El módulo Actualización de caché de emisión de Workbox puede ayudarte con esto.
• Necesitas este comportamiento de stale-while-revalidate en todos los navegadores modernos.

Usa un enfoque de control de caché si...

• Preferirías no lidiar con la sobrecarga de implementar y mantener un service worker para tu aplicación web.
• Puedes permitir que la administración automática de caché del navegador impida que tus cachés locales crezcan demasiado.
• No te molesta un enfoque que actualmente no es compatible con todos los navegadores actualizados (a partir de julio de 2019; es posible que la compatibilidad aumente en el futuro).

Si usas un service worker y también tienes stale-while-revalidate habilitado para algunas respuestas a través de un encabezado Cache-Control, en general, el service worker tendrá una "primera sesión" para responder a una solicitud. Si el service worker decide no responder o si en el proceso de generación de una respuesta realiza una solicitud de red mediante fetch(), el comportamiento configurado a través del encabezado Cache-Control entrará en vigencia.

Más información

• Respuesta stale-while-revalidate en la especificación de la API de Fetch.
• RFC 5861, que abarca la especificación stale-while-revalidate inicial
• Caché HTTP: tu primera línea de defensa, de la guía “Confiabilidad de red” de este sitio.

Hero image de Samuel Zeller.