La caché del navegador y la caché de Cloudflare no son lo mismo: Cache-Control, Edge TTL y actualización tras publicar

Al configurar la caché de Cloudflare, lo más fácil de confundir son dos cosas:

Cuánto tiempo cachean el contenido los nodos edge de Cloudflare.
Cuánto tiempo cachea localmente el navegador del usuario.

Ambas son cachés, pero controlan capas distintas y tienen riesgos distintos.

Para un blog estático, una estrategia estable es esta: la caché edge de Cloudflare puede ser más agresiva, mientras que la caché del navegador debe ser más conservadora. La caché de Cloudflare puede purgarse desde el panel o la API, pero la caché local del navegador del usuario no puede limpiarla directamente el dueño del sitio.

Primero Separa Las Tres Capas

Una visita pasa aproximadamente por tres capas:

1
2
3
4
5


Navegador
  ↓
Nodo edge de Cloudflare
  ↓
VPS / Nginx / archivos estáticos de Hugo

Hay dos capas de caché importantes:

Browser cache: caché guardada localmente en el equipo del usuario.
Edge cache: caché guardada en los nodos edge de Cloudflare.

El Cache-Control que devuelve Nginx en el origen afecta al navegador y también puede afectar al CDN. Las Cache Rules de Cloudflare permiten configurar Edge TTL y Browser TTL por separado. Además, Response Header Transform Rules puede modificar los encabezados finales que recibe el navegador. Si no separas estas capas, es fácil pensar que “la caché ya está configurada” cuando solo una parte está bajo control.

A Quién Controla Cache-Control

El centro de aprendizaje de Cloudflare explica Cache-Control como un encabezado HTTP que indica a navegadores y cachés intermedias cómo tratar los recursos.

Un ejemplo común:

1

Cache-Control: public, max-age=300

Significa que la respuesta puede cachearse y que el navegador puede tratarla como fresca durante un máximo de 300 segundos.

1

Cache-Control: private

Significa que la respuesta solo es adecuada para cachés privadas, como el navegador, y no debería guardarse en cachés compartidas como un CDN.

1

Cache-Control: no-store

Significa que no debe cachearse en ningún lugar. Es adecuado para datos muy sensibles.

1

Cache-Control: no-cache

El nombre puede confundir. No significa “no cachear nunca”, sino que antes de usar una versión cacheada hay que comprobar con el servidor si hay una versión nueva. Normalmente se combina con ETag o Last-Modified.

1

Cache-Control: s-maxage=86400

s-maxage está pensado para cachés compartidas, como un CDN. Permite que el CDN cachee durante más tiempo mientras el navegador sigue max-age u otras reglas.

Así que Cache-Control no es solo para navegadores ni solo para CDNs. Es un conjunto de instrucciones de caché. Qué capa las adopta o las sobrescribe depende de la configuración intermedia.

Diferencia Entre Edge TTL Y Browser TTL

En Cloudflare, los dos TTL deben leerse por separado.

Edge TTL decide cuánto tiempo cachean los nodos edge de Cloudflare.

Por ejemplo:

1

Cloudflare Edge TTL = 1 day

Significa que Cloudflare puede guardar páginas, imágenes, CSS, JS y otros contenidos en el edge durante un día. Si otro visitante pide la misma URL y hay acierto de caché, Cloudflare responde directamente sin volver al VPS.

Browser TTL decide cuánto tiempo cachea el navegador.

Por ejemplo:

1

Browser TTL = 5 minutes

Significa que, después de recibir un recurso, el navegador puede considerarlo fresco localmente durante un máximo de 5 minutos. Dentro de esos 5 minutos puede usar la caché local. Después, necesita revalidar o pedir el recurso de nuevo.

La diferencia clave es:

El site owner puede hacer purge de la Edge cache.
La Browser cache vive en el equipo del usuario y el site owner no puede limpiarla directamente.

Por eso no conviene dar un TTL largo de navegador a páginas HTML. De lo contrario, incluso después de purgar Cloudflare, el navegador de un visitante podría seguir mostrando una copia local antigua.

Por Qué Un Blog Estático Puede Cachear HTML

Los sitios dinámicos no suelen poder cachear HTML sin cuidado, porque las páginas pueden contener estado de sesión, perfiles, carritos, recomendaciones o información dependiente de permisos.

Un blog estático es diferente. Las páginas generadas por Hugo suelen ser archivos estáticos:

Página principal.
Artículos.
Categorías.
Etiquetas.
Páginas multilingües.
RSS.
sitemap.

Estas respuestas son básicamente iguales para todos los visitantes, así que Cloudflare puede cachear el HTML. Esto reduce solicitudes al origen y mejora la velocidad desde otras regiones.

La clave es:

1
2


Cloudflare Edge puede ser más largo
Browser debe ser más corto

Por ejemplo:

1
2


Cloudflare Edge TTL = 1 day
Browser TTL = 5 minutes

Cloudflare puede cachear durante un día, pero el navegador del usuario solo cachea durante cinco minutos.

Si Cada Publicación Hace Purge All, Edge TTL Puede Ser Más Largo

Si el script de despliegue llama a Cloudflare purge everything en cada publicación, Edge TTL puede ser más largo.

La lógica es:

1
2
3


Normalmente: Cloudflare cachea 1 día y reduce tráfico al origen
Al publicar: se sube el nuevo public y se ejecuta purge all
Después de publicar: Cloudflare vuelve al origen por contenido nuevo

Este modelo encaja bien con blogs estáticos, porque el contenido no cambia en tiempo real y las actualizaciones se concentran en el despliegue.

Edge TTL puede ser 1 día o 1 mes. La diferencia es sobre todo tolerancia al riesgo:

1 day: si falla el purge, el contenido viejo expira naturalmente en un día como máximo.
1 month: mayor tasa de aciertos de caché, pero si falla el purge el contenido viejo puede permanecer más tiempo.

Para un blog personal, 1 day es un punto de partida más seguro.

Por Qué No Conviene Alargar También Browser TTL

Cuanto más larga sea la caché del navegador, más rápida será la visita repetida, pero más difícil será controlar las actualizaciones.

Por ejemplo, si el HTML usa:

1

Cache-Control: public, max-age=31536000

Después de que un usuario visite un artículo, su navegador podría considerar esa página fresca durante un año. Si luego corriges un error, cambias un enlace o ajustas contenido, purgar Cloudflare quizá no afecte la caché local de ese usuario.

Los recursos estáticos pueden cachearse más tiempo porque normalmente tienen nombres con fingerprint:

1
2


/scss/style.min.5e5f1f8f7ce389becd0a48fe3eff3e1c79b2750a903584200a3a6fc54ae1e664.css
/ts/main.9acdcb7a78e911f2c617b8cd4af2eab573c04169dddc51c052977dde63210ced.js

Si el contenido cambia, el nombre del archivo cambia también, así que la caché antigua no afecta al nuevo archivo referenciado por la página.

Pero la URL HTML normalmente no cambia:

1

/2026/06/13/browser-cache-vs-cloudflare-edge-cache/

Por eso el HTML funciona mejor con un Browser TTL corto.

Una Configuración Simple

Si quieres simplicidad y no quieres separar por tipo de archivo, puedes usar una política unificada:

1
2
3


Cloudflare Edge TTL = 1 day
Browser TTL = 5 minutes
Cada publicación: purge everything

Cloudflare Cache Rule controla la caché edge:

1

(http.host in {"knightli.com" "www.knightli.com"} and not starts_with(http.request.uri.path, "/cdn-cgi/"))

Acción:

1
2
3
4


Eligible for cache
Edge TTL: 1 day
Browser TTL: 5 minutes
Query string: ignore

Si el Nginx de origen define un Cache-Control más largo para CSS, JS o imágenes, y quieres que todos los recursos devueltos al navegador sean de 5 minutos, añade una Response Header Transform Rule en Cloudflare:

1
2
3
4
5


Set:
Cache-Control: public, max-age=300

Remove:
Expires

Así consigues:

Edge cache controlada por Cloudflare Cache Rule.
Browser cache controlada por la regla de respuesta de Cloudflare.
Nginx no necesita unificar Browser TTL.

Cuándo Tiene Sentido Cachear Por Capas

Si buscas más rendimiento, puedes separar por tipo de recurso:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


HTML:
  Edge TTL: 1 day
  Browser TTL: 5 minutes

CSS / JS / imágenes / fuentes:
  Edge TTL: 1 month
  Browser TTL: 1 month o 1 year

RSS / sitemap:
  Edge TTL: 1 hour
  Browser TTL: 5 minutes

Esta configuración es más eficiente, pero también más compleja de mantener. Un blog personal no necesita empezar ahí.

Cuando confirmes que todos los recursos estáticos tienen nombres con hash, puedes aumentar con más seguridad el Browser TTL de CSS, JS e imágenes.

Cómo Verificar Que Funciona

Puedes usar curl -I dos veces sobre la misma URL:

1
2


curl.exe -I https://knightli.com/
curl.exe -I https://knightli.com/

Mira estos dos encabezados:

1
2


cf-cache-status: HIT
cache-control: public, max-age=300

cf-cache-status: HIT indica que hubo acierto en la caché edge de Cloudflare.

cache-control: public, max-age=300 indica que la caché visible para el navegador dura como máximo 300 segundos.

Si ves:

1

cf-cache-status: MISS

Puede ser la primera visita, un purge reciente, reglas aún propagándose o un recurso que no cumple las condiciones de caché. Una segunda solicitud normalmente puede pasar a HIT.

Si CSS o JS todavía muestran:

1

cache-control: public, max-age=31536000, immutable

Entonces el encabezado de caché del navegador sigue viniendo del origen o de una regla de mayor prioridad. Puedes aceptar caché larga para recursos estáticos o sobrescribirla con Cloudflare Response Header Transform Rule.

Resumen

La caché del navegador y la caché de Cloudflare no son lo mismo.

La regla práctica es:

Cloudflare Edge cache puede ser agresiva porque el site owner puede purgarla.
Browser cache debe ser prudente porque no se puede limpiar la caché local de los usuarios.
Las páginas HTML funcionan mejor con Browser TTL corto.
Los recursos estáticos con hash pueden usar Browser TTL largo.
Para un blog estático que ejecuta purge all en cada despliegue, Edge TTL de 1 día es un punto de partida estable.

Para un blog estático Hugo, empezar con:

1
2
3


Cloudflare Edge TTL = 1 day
Browser TTL = 5 minutes
Cada publicación: purge everything

ya ofrece gran parte del beneficio de aceleración CDN y evita que páginas HTML antiguas permanezcan demasiado tiempo en los navegadores de los usuarios.

Referencias

Cloudflare: https://www.cloudflare.com/zh-cn/learning/cdn/glossary/what-is-cache-control/
Cloudflare Cache Rules: https://developers.cloudflare.com/cache/how-to/cache-rules/
Cloudflare Response Header Transform Rules: https://developers.cloudflare.com/rules/transform/response-header-modification/