Cache e invalidacion en Neges Storefront: del precio pegado al edge sano

Resumen ejecutivo

Neges Storefront es multi-tenant, usa Angular SSR en Vercel y toma sus datos desde Strapi en Railway. Para que las tiendas respondan rapido se introdujo cache en el edge de Vercel con invalidacion por tags ante ediciones de contenido.

Durante la puesta en marcha aparecio un sintoma peligroso: un operador cambiaba un precio en el backoffice y la tienda seguia mostrando el valor anterior, incluso despues de esperar y refrescar. La API de Strapi devolvia el valor correcto, pero el HTML cacheado mantenia un precio viejo horneado en la hidratacion.

El problema no era una sola cosa. Habia tres capas apiladas: invalidacion inerte por variables desalineadas, cache en memoria del SSR con TTL demasiado largo y, finalmente, un loop de envenenamiento donde el SSR hacia self-calls hacia su host publico y recibia datos stale desde el edge.

El resultado final: una edicion de precio se propaga sola en segundos. La primera visita tras una edicion puede ver el valor viejo una unica vez por stale-while-revalidate, y desde la revalidacion siguiente el edge queda con el valor nuevo.

El incidente: precios pegados

El sintoma reportado fue directo: cambio un precio en backoffice y en la tienda no se actualiza. En un caso concreto, la ficha de una churrera manual, codigo EVP3-H, mostraba $162.082 en el home y en el detalle, cuando el precio correcto de lista base era $162.080.

Modelo mental: actores y capas

Para entender la arquitectura y el bug hay que separar tres capas: el edge que sirve copias, la funcion SSR que fabrica HTML y Strapi como fuente de verdad.

El edge existe porque armar una pagina puede tardar entre 1 y 5 segundos, mientras entregar una copia puede rondar decenas de milisegundos. Esa copia tiene TTL y tags. Cuando cambia contenido, Strapi marca como stale las copias con tenant:<slug>.

Tres causas apiladas

Causa raiz: SSR self-call por el edge

La fabrica SSR necesitaba datos del producto o catalogo. En vez de pedirlos directo a Strapi, construia una URL con el host publico y hacia fetch a /storefront-api. Esa llamada salia de la funcion, entraba de nuevo por Vercel Edge y quedaba sometida al mismo stale-while-revalidate que las visitas reales.

Por eso esperar y refrescar no bastaba. Cada refresh podia disparar una revalidacion que volvia a contaminar el HTML. No era un vencimiento que se curaba con tiempo; era una fuente que se re-contaminaba a si misma.

La solucion en cinco piezas

La arquitectura final mezcla velocidad, frescura y aislamiento multi-tenant. Las tres primeras piezas hacen que la tienda sea rapida; las dos ultimas cierran los agujeros de staleness.

Pieza 1: edge cache de HTML y APIs publicas

En neges-store/src/server-app.ts, las respuestas publicas anonimas setean headers separados para navegador y edge. El navegador siempre revalida; el edge puede guardar copias por TTL y asociarlas a tags para purga selectiva.

Cache-Control:            public, max-age=0, must-revalidate
Vercel-CDN-Cache-Control: public, max-age=<ttl>, stale-while-revalidate=<swr>
Vercel-Cache-Tag:         tenant:<slug>, tenant-domain:<host>

Pieza 2: precios en lote

El catalogo resolvia precios producto por producto, con alrededor de 352 consultas por render. Se agrego resolveProductPricesForList en neges-strapi/src/api/product-price/services/pricing.ts para resolver la lista completa con una consulta product_prices filtrada por product.documentId.

Pieza 3: invalidacion por tags desde Strapi

neges-strapi/src/utils/vercel-cache-invalidation.ts registra un middleware del document-service. Ante mutaciones de product, product-price, product-category, catalog-collection, storefront-studio-config, tenant-domain o tenant, resuelve el slug del tenant y llama a la REST API de Vercel invalidate-by-tags.

POST https://api.vercel.com/v1/edge-cache/invalidate-by-tags
?projectIdOrName=<VERCEL_STOREFRONT_PROJECT_ID>&teamId=<VERCEL_TEAM_ID>
Authorization: Bearer <VERCEL_TOKEN>
Content-Type: application/json

{
  "tags": ["tenant:importadora-roble"],
  "target": "production"
}

Pieza 4: TTL corto de cache SSR in-memory

El SSR mantiene una cache en memoria por lambda en storefront.server-api.ts, controlada por CATALOG_CACHE_TTL_MS y PRODUCT_CACHE_TTL_MS. Su razon de ser no es frescura de negocio, sino deduplicar el doble-resolve de un mismo render.

Ese doble-resolve ocurre en menos de un segundo: una resolucion para detectar redirect o 404 y otra durante el render Angular. Con TTL 60 s, el edge podia revalidar y tomar datos viejos desde la memoria de la funcion. Con 5 s, se mantiene el dedup sin enmascarar ediciones.

Pieza 5: interceptor SSR in-process

El fix de causa raiz vive en neges-store/src/app/core/storefront/storefront-ssr-data.interceptor.ts y se registra solo en app.config.server.ts. En servidor, los GET a /storefront-api/catalog y /storefront-api/products/:slug se resuelven llamando directamente a getStorefrontCatalogData y getStorefrontProductData.

Flujo correcto de una edicion de precio

Referencia de componentes y archivos

Configuracion

La taxonomia actual emite y purga a nivel tenant: tenant:<slug> como tag primario y tenant-domain:<host> como respaldo. En Vercel, el documento base considera limites de 256 caracteres por tag, 16 tags por llamada REST y coma como separador reservado.

Decisiones y tradeoffs

Runbook operativo

Cuando alguien reporta que una pagina no se actualiza, el diagnostico debe separar fuente de verdad, render fresco y copia del edge. Asi se evita culpar al backend cuando el problema es staleness, o culpar al cache cuando el dato base sigue mal.

# 1) Ver estado de copia del edge y antiguedad
curl -sI "https://importadoraroble.cl/products/<slug>" | grep -i "x-vercel-cache\|^age:"

# 2) Comparar copia normal vs render fresco con parametro anti-cache
curl -s --compressed "https://importadoraroble.cl/products/<slug>" -o /tmp/cacheado.html
curl -s --compressed "https://importadoraroble.cl/products/<slug>?cb=$(date +%s)" -o /tmp/fresco.html

# 3) Fuente de verdad: Strapi sin cache del edge
curl -s --compressed -H "X-Store-Host: importadoraroble.cl" \
  "https://api.neges.cl/api/storefront/products/<slug>"

Como evolucionar sin reabrir el bug

Changelog relevante

Glosario

Recursos relacionados