Edge HTML that ignored the locale cookie

Origin was nginx, php, Vue SSR, MySQL. Cloudflare sat in front for TLS and static assets. Someone enabled Cache Everything on HTML. The cache key was the URL. Locale lived in a cookie. The first crawler asked for Russian. Germany received that document for a minute.

Hydration saw lang=ru in the HTML and a de preference in the client. The page flashed. Logged-in users with auth_token sometimes got a public fragment because the edge did not bypass on that cookie.

The problem was HTML at the edge keyed only on the path. A de visitor got ru markup. A signed-in user could get a public fragment. I needed locale in the key or no HTML cache, and bypass on auth_token.

What the edge may cache

Static assets at Cloudflare stay. HTML either bypasses, or the cache key includes locale, and requests with auth_token skip the edge. nginx already had a two-second microcache with that rule. Duplicating HTML cache without the key fought the origin.

DNS without guessing pages

Cloudflare is still the DNS and TLS front. The incident was HTML. The catalog listing is locale-specific SSR. Treat it like a cookie API, not like a PNG. Origin remains the source of the document. The edge is allowed to be wrong for a minute if you let it key only on the path.

What I took from this

Cache Everything on SSR HTML is a wrong language until the key includes locale. A PNG rule is not a page rule.

auth_token must bypass the edge. Public HTML in a signed-in slot is the same class of leak as the nginx microcache case on this site.

Origin already had a two-second microcache with the right key. A second HTML cache without that key undoes it.