Vercel CDN cache and Vary: Accept header.

[dmitrykozyrenko]

Hi, I'm trying to build simple api that can resize source image from S3 and also format image to WebP if browser accept it but second part didn't work. Handler return headers:

{
  "Vary": "Accept",
  "Content-Type": "`image/jpeg` or `image/webp` if supported"
}

and also Cache-Control.

Tested two Cache-Control header value variants, first one public, max-age=0, must-revalidate and in this case handler correctly send image/jpeg or image/webp type but Vercel CDN doesn't cache response at all, x-vercel-cache: MISS all the time.

Second variant that I tested public, max-age=315360000, with this value Vercel CDN cache first request result to region and send it to all browsers, looks like Accept header is ignored, so old browsers that didn't support WebP will receive exactly this format if previous request on same region will be from Chrome browser for example.

What am I doing wrong, or maybe it's not possible to implement this in Vercel?

[leerob]

The vary header is not currently supported: https://vercel.com/docs/concepts/edge-network/headers

[eric-burel]

Ah didn't know that Vercel was using Cloudflare, do you have more docs about that by any chance?
Cloudfare docs: https://developers.cloudflare.com/cache/concepts/cache-control/#other

[unstubbable]

This might not apply to all use cases, but I managed to force the creation of separate cache entries based on the accept header by specifying two different destinations (/ and /index) that point to the same edge function. See unstubbable/mfng@f13f24a for details.

[predaytor]

@eric-burel I think Vercel has some infra overlay through Cloudflare, so we need confirmation. For example Cache-Control: stale-while-revalidate support, which doesn't seem to work in the latter (does it even work in Vercel?).

About the Vary header - as far as I know it is not supported on Vercel/Cloudflare. With custom servers we might have something like Varnish (which has this built in), so in our case only browsers can respect this header (for example, to invalidate a user's browser cache based on a cookie).

upd: sorry for misleading

[leerob]

Vercel's Edge Network doesn't use Cloudflare. The Vary header is still not supported, but we are working on making the Data Cache available for more general use.

[drzax]

As far as I can tell the Data Cache doesn't provide a solution for varying the response based on a header. This would be extremely useful for (for example) the accepts header. Like @unstubbable wanted to do, I want to return a HTML, human readable response by default, but if an accepts header on the request indicates asks for JSON, return that instead. This can be done with a function, I don't think it's cacheable without support for the vary header?