Edge-Caching-Strategien für React-Apps

Der Cache-Control-Response-Header steuert, wie lange Cloudflare (und andere CDNs) Ihre SSR-Responses cachen. Die wichtigsten Direktiven sind: max-age (Browser-Cache), s-maxage (Dauer des CDN-/Shared-Caches) und stale-while-revalidate (veraltete Inhalte ausliefern, während sie im Hintergrund erneut validiert werden).

s-maxage wird von Shared-Caches (CDNs) berücksichtigt, während max-age für Browser-Caches gilt. Für SSR-Seiten möchten Sie typischerweise s-maxage=60 (der CDN-Cache speichert 60 Sekunden) und max-age=0 (der Browser validiert immer erneut), sodass alle Benutzer einigermaßen aktuelle Inhalte aus dem Edge-Cache erhalten.

Wenn Sie stale-while-revalidate=30 zu Ihrem Cache-Control-Header hinzufügen, weist dies Cloudflare an, die gecachte Seite sofort auszuliefern und gleichzeitig im Hintergrund eine aktuelle Version abzurufen. Benutzer erhalten immer eine schnelle Antwort; die maximale Veraltung beträgt s-maxage + stale-while-revalidate Sekunden.

Personalisierte Inhalte (basierend auf der Benutzersitzung oder der Locale) dürfen nicht aus einem Shared-Cache an den falschen Benutzer ausgeliefert werden. Der Header Vary: Cookie weist Cloudflare an, jeden eindeutigen Cookie-Wert als separaten Cache-Eintrag zu behandeln. So wird verhindert, dass die Daten eines Benutzers an einen anderen Benutzer ausgeliefert werden.

Ein gängiges Muster besteht darin, im Worker nach einem Session-Cookie zu suchen, bevor entschieden wird, ob der Cache verwendet werden soll. Ist ein Session-Cookie vorhanden, umgehen Sie den Cache vollständig und rendern eine personalisierte Response. Ist kein Session-Cookie vorhanden, ist die Seite öffentlich und kann aus dem Cache ausgeliefert werden.

Cloudflare KV ist ein global verteilter Key-Value-Store, der Daten in der Nähe der Benutzer speichert. Sie können gerendertes HTML in KV cachen — speichern Sie die gerenderte Seite mit einer TTL als Wert, und lesen zukünftige Anfragen die Daten am Edge aus KV, statt sie erneut mit React zu rendern.

KV-Lesevorgänge sind schnell, weil die Daten an den Edge-PoP repliziert werden, der die Anfrage bedient — die typische Latenz beim Lesen liegt unter 5 ms. KV-Schreibvorgänge verwenden dagegen eventual consistency: Ein Schreibvorgang in einer Region wird innerhalb von 60 Sekunden an alle globalen PoPs weitergegeben. Daher sehen einige Benutzer möglicherweise kurzzeitig veraltete Daten.

Cloudflare R2 ist ein S3-kompatibler Objektspeicherdienst ohne Egress-Gebühren. Er eignet sich für größere Assets, die nicht in KV passen: WASM-Module, vorgerenderte OG-Bilder und große JSON-Datensätze. Workers greifen über Bindings genauso wie bei KV auf R2 zu.

Cloudflare Enterprise unterstützt Cache-Tags: Sie versehen eine Response mit Cache-Tag: product-42. Wenn sich Produkt 42 ändert, rufen Sie die Cloudflare-API auf, um alle mit product-42 markierten Responses zu löschen. So ist eine gezielte Cache-Invalidierung möglich, ohne den gesamten Cache zu leeren.

Wenn Sie eine neue Version Ihres Workers deployen, verweist vorhandenes gecachtes HTML möglicherweise auf alte Dateinamen von JS-Bundles. Eine robuste Strategie besteht darin, die Deployment-Version in Ihre Cache-Keys aufzunehmen oder versionierte Bundle-Dateinamen zu verwenden (über Vites Content-Hashing), sodass altes HTML immer auf gültige, gecachte JS-Dateien verweist.

Ein Worker, der SSR-HTML in KV cached, folgt diesem Muster: Berechnen Sie einen Cache-Key aus der URL (und optional der Locale), prüfen Sie KV auf einen Treffer und geben Sie gecachtes HTML bei einem Treffer sofort zurück. Bei einem Fehlschlag rendern Sie mit React, speichern das Ergebnis mit einer TTL in KV und geben anschließend das frisch gerenderte HTML zurück.

Welches Konsistenzmodell verwendet Cloudflare KV für Schreibvorgänge?

Edge-Caching für React-Apps kombiniert mehrere Strategien: Cache-Control mit s-maxage für das CDN-Caching öffentlicher Seiten, Vary: Cookie, um die gemeinsame Nutzung personalisierter Responses zu verhindern, KV für am Edge gecachtes gerendertes HTML und Cache-Tags für granulare Invalidierung. Das Modell der eventual consistency von KV bedeutet, dass die Weitergabe von Schreibvorgängen bis zu 60 Sekunden dauern kann — planen Sie Ihre TTLs und Ihre Invalidierungsstrategie entsprechend.