Aktuelle Informationen mit „Stale-while-revalid“

Ein zusätzliches Tool, mit dem Sie beim Bereitstellen Ihrer Webanwendung ein Gleichgewicht zwischen Unmittelbarkeit und Aktualität erreichen können.

Jeff Posnick

Was wurde versandt?

Mit stale-while-revalidate können Entwickler ein Gleichgewicht zwischen Unmittelbarkeit – im Cache gespeicherter Inhalte sofort laden und Aktualität – gewährleisten, damit Aktualisierungen der im Cache gespeicherten Inhalte in Zukunft verwendet werden. Wenn Sie einen Webdienst oder eine Bibliothek eines Drittanbieters betreiben, die regelmäßig aktualisiert wird, oder wenn Ihre eigenen Assets tendenziell eine kurze Lebensdauer haben, kann stale-while-revalidate eine nützliche Ergänzung zu Ihren bestehenden Caching-Richtlinien sein.

In Chrome 75 und Firefox 68 wird die Einstellung von stale-while-revalidate neben max-age im Cache-Control-Antwortheader unterstützt.

Browser, die stale-while-revalidate nicht unterstützen, ignorieren diesen Konfigurationswert automatisch und verwenden max-age, wie ich gleich erklären werde...

Was bedeutet das?

stale-while-revalidate wird in zwei Teile unterteilt: die Idee, dass eine im Cache gespeicherte Antwort veraltet sein könnte, und den Prozess der Neuvalidierung.

Woher weiß der Browser, ob eine im Cache gespeicherte Antwort „veraltet“ ist? Ein Cache-Control-Antwortheader, der stale-while-revalidate enthält, sollte auch max-age enthalten. Die über max-age angegebene Anzahl von Sekunden bestimmt die Veralterung. Alle im Cache gespeicherten Antworten, die neuer als max-age sind, gelten als aktuell und ältere im Cache gespeicherte Antworten sind veraltet.

Wenn die lokal im Cache gespeicherte Antwort noch aktuell ist, kann sie unverändert verwendet werden, um eine Browseranfrage zu erfüllen. Aus Sicht von stale-while-revalidate gibt es in diesem Szenario nichts zu tun.

Wenn die im Cache gespeicherte Antwort jedoch veraltet ist, wird eine weitere altersbasierte Prüfung durchgeführt: Wird das Alter der im Cache gespeicherten Antwort innerhalb des durch die Einstellung stale-while-revalidate festgelegten zusätzlichen Zeitfensters erreicht?

Wenn das Alter einer veralteten Antwort in dieses Fenster fällt, wird diese verwendet, um die Anfrage des Browsers auszuführen. Gleichzeitig wird eine erneute Validierungsanfrage an das Netzwerk gesendet, sodass die Verwendung der im Cache gespeicherten Antwort nicht verzögert wird. Die zurückgegebene Antwort kann dieselben Informationen wie die zuvor im Cache gespeicherte Antwort enthalten oder davon abweichen. In beiden Fällen wird die Netzwerkantwort lokal gespeichert, was zuvor im Cache gespeichert war, und der Timer für die Aktualität, der bei zukünftigen max-age-Vergleichen verwendet wird, zurückgesetzt.

Wenn die veraltete, im Cache gespeicherte Antwort jedoch alt genug ist, dass sie außerhalb des Zeitfensters von stale-while-revalidate liegt, wird die Anfrage des Browsers nicht ausgeführt. Der Browser ruft stattdessen eine Antwort vom Netzwerk ab und verwendet diese, um die ursprüngliche Anfrage zu erfüllen und den lokalen Cache mit einer neuen Antwort zu füllen.

Live-Beispiel

Im Folgenden finden Sie ein einfaches Beispiel für eine HTTP API zum Zurückgeben der aktuellen Zeit, genauer gesagt der aktuellen Anzahl von Minuten nach der vollen Stunde.

In diesem Szenario verwendet der Webserver diesen Cache-Control-Header in seiner HTTP-Antwort:

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

Wenn eine Anfrage für die Zeit innerhalb der nächsten 1 Sekunde wiederholt wird, bleibt der zuvor im Cache gespeicherte Wert immer noch aktuell und wird unverändert und ohne erneute Validierung verwendet.

Wird eine Anfrage 1 bis 60 Sekunden später wiederholt, ist der im Cache gespeicherte Wert veraltet, wird aber zur Ausführung der API-Anfrage verwendet. Gleichzeitig wird „im Hintergrund“ eine erneute Validierungsanfrage gestellt, um den Cache zur späteren Verwendung mit einem neuen Wert zu füllen.

Wird eine Anfrage nach mehr als 60 Sekunden wiederholt, wird die veraltete Antwort überhaupt nicht verwendet. Sowohl die Ausführung der Browseranfrage als auch die erneute Cache-Validierung sind davon abhängig, dass eine Antwort vom Netzwerk zurückgegeben wird.

Im Folgenden finden Sie eine Aufschlüsselung dieser drei unterschiedlichen Zustände zusammen mit dem Zeitfenster, in dem jeder der Status für unser Beispiel zutrifft:

Ein Diagramm, das die Informationen aus dem vorherigen Abschnitt veranschaulicht.

Was sind die häufigsten Anwendungsfälle?

Das obige Beispiel für einen API-Dienst vom Typ „Minuten nach der vollen Stunde“ ist zwar erfunden, veranschaulicht aber den erwarteten Anwendungsfall: Dienste, die Informationen liefern, die aktualisiert werden müssen, bei denen jedoch ein gewisser Grad an Veralterung akzeptabel ist.

Weniger konstruktive Beispiele könnten eine API für die aktuellen Wetterbedingungen oder die wichtigsten Schlagzeilen der letzten Stunde sein.

Im Allgemeinen ist jede Antwort, die in einem bekannten Intervall aktualisiert wird, wahrscheinlich mehrmals angefordert und innerhalb dieses Intervalls statisch ist, ein guter Kandidat für das kurzfristige Caching über max-age. Die Verwendung von stale-while-revalidate zusätzlich zu max-age erhöht die Wahrscheinlichkeit, dass zukünftige Anfragen aus dem Cache mit aktuelleren Inhalten ausgeführt werden können, ohne dass eine Netzwerkantwort blockiert wird.

Wie interagiert es mit Service Workern?

Wenn Sie schon von stale-while-revalidate gehört haben, steht es wahrscheinlich im Kontext von Rezepten, die in einem Service Worker verwendet werden.

Die Verwendung von „stale-while-revalid“ über einen Cache-Control-Header weist einige Ähnlichkeiten mit der Verwendung in einem Service Worker auf. Es gelten viele der gleichen Überlegungen zu Kompromissen bei der Aktualität und maximaler Lebensdauer. Sie sollten jedoch einige Aspekte berücksichtigen, wenn Sie entscheiden, ob Sie einen Service Worker-basierten Ansatz implementieren oder sich nur auf die Cache-Control-Header-Konfiguration verlassen möchten.

Verwenden Sie einen Service Worker-Ansatz, wenn...

  • Sie verwenden bereits einen Service Worker in Ihrer Webanwendung.
  • Sie benötigen eine detaillierte Kontrolle über den Inhalt Ihrer Caches und möchten beispielsweise eine am wenigsten verwendete Ablaufrichtlinie implementieren. Das Modul Cache-Ablauf von Workbox kann hierbei hilfreich sein.
  • Sie möchten benachrichtigt werden, wenn sich während der Neuvalidierung im Hintergrund eine veraltete Antwort ändert. Das Modul Broadcast Cache Update von Workbox kann hierbei hilfreich sein.
  • Dieses stale-while-revalidate-Verhalten ist in allen modernen Browsern erforderlich.

Verwenden Sie einen Cache-Control-Ansatz, wenn...

  • Sie möchten sich lieber nicht mit dem Aufwand für die Bereitstellung und Wartung eines Service Workers für Ihre Webanwendung befassen.
  • Sie sind damit einverstanden, dass die automatische Cache-Verwaltung des Browsers verhindern kann, dass Ihre lokalen Caches zu groß werden.
  • Sie haben kein Problem mit einem Ansatz, der derzeit nicht von allen modernen Browsern unterstützt wird (Stand: Juli 2019; die Unterstützung wird möglicherweise in Zukunft erweitert).

Wenn Sie einen Service Worker verwenden und stale-while-revalidate für einige Antworten über einen Cache-Control-Header aktiviert ist, hat der Service Worker in der Regel die Möglichkeit, auf eine Anfrage zu reagieren. Wenn der Service Worker nicht antwortet oder beim Generieren einer Antwort eine Netzwerkanfrage mit fetch() sendet, wird das über den Header Cache-Control konfigurierte Verhalten wirksam.

Weitere Informationen

Hero-Image von Samuel Zeller