Estrategias de caché en el edge para aplicaciones React

El encabezado de respuesta Cache-Control controla durante cuánto tiempo Cloudflare (y otras CDN) almacenan en caché sus respuestas SSR. Las directivas principales son: max-age (caché del navegador), s-maxage (duración de la caché de la CDN o compartida) y stale-while-revalidate (servir contenido obsoleto mientras se vuelve a validar en segundo plano).

s-maxage se respeta en las cachés compartidas (CDN), mientras que max-age se aplica a las cachés de los navegadores. Para las páginas SSR, normalmente querrá s-maxage=60 (la CDN almacena el contenido durante 60 segundos) y max-age=0 (el navegador siempre vuelve a validar), de modo que todos los usuarios reciban contenido razonablemente actualizado desde la caché del edge.

Añadir stale-while-revalidate=30 al encabezado Cache-Control indica a Cloudflare que sirva la página almacenada en caché al instante mientras obtiene una versión actualizada en segundo plano. Los usuarios siempre reciben una respuesta rápida; la antigüedad máxima es de s-maxage + stale-while-revalidate segundos.

El contenido personalizado (basado en la sesión o la configuración regional del usuario) no debe servirse desde una caché compartida al usuario equivocado. El encabezado Vary: Cookie indica a Cloudflare que trate cada valor único de Cookie como una entrada de caché independiente, lo que evita que los datos de un usuario se sirvan a otro.

Un patrón habitual consiste en comprobar si existe una cookie de sesión en el Worker antes de decidir si se usará la caché. Si hay una cookie de sesión, omita completamente la caché y renderice una respuesta personalizada. Si no hay cookie de sesión, la página es pública y puede servirse desde la caché.

Cloudflare KV es un almacén de clave-valor distribuido globalmente que guarda los datos cerca de los usuarios. Puede almacenar HTML renderizado en KV: guarde la página renderizada como un valor con un TTL y, en las solicitudes posteriores, léala desde KV en el edge en lugar de volver a renderizarla con React.

Las lecturas de KV son rápidas porque los datos se replican en el PoP de edge que atiende la solicitud; la latencia de lectura habitual es inferior a 5 ms. Sin embargo, las escrituras de KV utilizan consistencia eventual: una escritura en una región se propaga a todos los PoP globales en un plazo de 60 segundos, por lo que algunos usuarios pueden ver datos obsoletos brevemente.

Cloudflare R2 es un servicio de almacenamiento de objetos compatible con S3 y sin cargos de salida. Es adecuado para recursos más grandes que no caben en KV: módulos WASM, imágenes OG prerenderizadas y grandes conjuntos de datos JSON. Los Workers acceden a R2 mediante bindings, igual que a KV.

Cloudflare Enterprise admite etiquetas de caché: etiquete una respuesta con Cache-Tag: product-42 y, cuando cambie el producto 42, llame a la API de Cloudflare para purgar todas las respuestas etiquetadas con product-42. Esto permite invalidar la caché de forma selectiva sin purgarla por completo.

Cuando despliegue una nueva versión de su Worker, el HTML almacenado en caché puede hacer referencia a nombres antiguos de archivos de los bundles de JavaScript. Una estrategia sólida consiste en incluir la versión del despliegue en las claves de caché o utilizar nombres de bundle versionados (mediante el hash de contenido de Vite), de modo que el HTML antiguo siempre haga referencia a archivos JavaScript válidos y almacenados en caché.

Un Worker que almacena HTML SSR en KV sigue este patrón: calcule una clave de caché a partir de la URL (y, opcionalmente, de la configuración regional), compruebe si existe en KV y devuelva el HTML almacenado al instante si lo encuentra. Si no lo encuentra, renderice con React, guarde el resultado en KV con un TTL y devuelva el HTML recién renderizado.

¿Qué modelo de consistencia utiliza Cloudflare KV para las escrituras?

El almacenamiento en caché en el edge para aplicaciones React combina varias estrategias: s-maxage de Cache-Control para almacenar páginas públicas en la CDN, Vary: Cookie para evitar que se compartan respuestas personalizadas, KV para almacenar HTML renderizado en el edge y etiquetas de caché para una invalidación granular. El modelo de consistencia eventual de KV implica que la propagación de las escrituras puede tardar hasta 60 segundos; diseñe sus TTL y su estrategia de invalidación teniendo esto en cuenta.