Strategie buforowania aplikacji React na brzegu sieci

Nagłówek odpowiedzi Cache-Control określa, jak długo Cloudflare (i inne CDN-y) przechowują w pamięci podręcznej odpowiedzi SSR. Najważniejsze dyrektywy to: max-age (pamięć podręczna przeglądarki), s-maxage (czas przechowywania w pamięci podręcznej CDN-u/współdzielonej) oraz stale-while-revalidate (serwowanie nieaktualnej treści podczas ponownej walidacji w tle).

s-maxage jest respektowane przez współdzielone pamięci podręczne (CDN-y), a max-age dotyczy pamięci podręcznych przeglądarek. W przypadku stron SSR zazwyczaj należy użyć s-maxage=60 (CDN przechowuje dane przez 60 sekund) i max-age=0 (przeglądarka zawsze ponownie sprawdza aktualność), aby wszyscy użytkownicy otrzymywali odpowiednio świeżą treść z pamięci podręcznej na brzegu.

Dodanie stale-while-revalidate=30 do nagłówka Cache-Control informuje Cloudflare, aby natychmiast zwracał stronę z pamięci podręcznej, jednocześnie pobierając świeżą wersję w tle. Użytkownicy zawsze otrzymują szybką odpowiedź; maksymalny czas nieaktualności wynosi s-maxage + stale-while-revalidate sekund.

Treści spersonalizowanych (na podstawie sesji użytkownika lub lokalizacji) nie wolno udostępniać z pamięci współdzielonej niewłaściwemu użytkownikowi. Nagłówek Vary: Cookie informuje Cloudflare, aby traktował każdą unikatową wartość Cookie jako osobny wpis w pamięci podręcznej, zapobiegając udostępnieniu danych jednego użytkownika innemu użytkownikowi.

Typowy wzorzec polega na sprawdzeniu cookie sesji w Workerze przed podjęciem decyzji, czy użyć pamięci podręcznej. Jeśli cookie sesji jest obecne, należy całkowicie pominąć pamięć podręczną i wygenerować spersonalizowaną odpowiedź. Jeśli cookie sesji nie ma, strona jest publiczna i można ją dostarczyć z pamięci podręcznej.

Cloudflare KV to globalnie rozproszony magazyn klucz-wartość, który przechowuje dane blisko użytkowników. W KV można buforować wyrenderowany HTML — przechowywać wyrenderowaną stronę jako wartość z TTL, aby kolejne żądania odczytywały ją z KV na brzegu zamiast ponownie renderować ją za pomocą React.

Odczyty z KV są szybkie, ponieważ dane są replikowane do brzegowego PoP obsługującego żądanie — typowe opóźnienie odczytu wynosi poniżej 5 ms. Zapisy w KV wykorzystują jednak spójność ostateczną: zapis w jednym regionie jest propagowany do wszystkich globalnych PoP-ów w ciągu 60 sekund, co oznacza, że niektórzy użytkownicy mogą przez krótki czas widzieć nieaktualne dane.

Cloudflare R2 to zgodna z S3 usługa magazynowania obiektów, bez opłat za transfer wychodzący. Nadaje się do większych zasobów, które nie mieszczą się w KV: modułów WASM, wstępnie wyrenderowanych obrazów OG oraz dużych zbiorów danych JSON. Workery uzyskują dostęp do R2 za pośrednictwem bindingów, podobnie jak do KV.

Cloudflare Enterprise obsługuje tagi pamięci podręcznej: odpowiedź można oznaczyć nagłówkiem Cache-Tag: product-42, a gdy produkt 42 się zmieni, wywołać API Cloudflare w celu usunięcia wszystkich odpowiedzi oznaczonych tagiem product-42. Umożliwia to precyzyjne unieważnianie pamięci podręcznej bez czyszczenia całej pamięci podręcznej.

Po wdrożeniu nowej wersji Workera istniejący HTML w pamięci podręcznej może odwoływać się do starych nazw plików bundli JS. Solidna strategia polega na uwzględnieniu wersji wdrożenia w kluczach pamięci podręcznej albo na użyciu wersjonowanych nazw plików bundli (dzięki haszowaniu zawartości w Vite), aby stary HTML zawsze odwoływał się do prawidłowych, zbuforowanych plików JS.

Worker buforujący HTML SSR w KV działa według następującego wzorca: należy obliczyć klucz pamięci podręcznej na podstawie adresu URL (i opcjonalnie locale), sprawdzić, czy w KV znajduje się wpis, a jeśli tak, natychmiast zwrócić zbuforowany HTML. W przypadku braku wpisu należy wyrenderować stronę za pomocą React, zapisać wynik w KV z TTL, a następnie zwrócić świeżo wyrenderowany HTML.

Jaki model spójności stosuje Cloudflare KV podczas zapisu?

Cache’owanie aplikacji React na brzegu łączy kilka strategii: s-maxage w Cache-Control do cache’owania publicznych stron przez CDN, Vary: Cookie zapobiegające udostępnianiu spersonalizowanych odpowiedzi, KV do cache’owania wyrenderowanego HTML na brzegu oraz tagi pamięci podręcznej do szczegółowego unieważniania. Model spójności ostatecznej KV oznacza, że propagacja zapisu trwa do 60 sekund — należy odpowiednio zaprojektować wartości TTL i strategię unieważniania.