CODEWITHSUNDEEP
cachingnetlifypurgeedge-function
Vasi Chindris
Vasi Chindris

Reputation: 324

Netlify: Purge cache tags set in edge functions

I have a CMS where I store images. I want this images to be proxied and cached by Netlify and be able to purge the cache based on cache tags. The proxy itself works, resources are cached, but the cache purge by tag not.

I have set the following:

export default async (req: Request, context: Context) => {
  const response = await context.next();
  // getCacheTagsForPath() is a custom function to build an array of cache tags.
  const cacheTags = getCacheTagsForPath(req.url);
  const headers = Object.fromEntries(response.headers.entries())
  return new Response(await response.blob(), {
    headers: {
      ...headers,
      'Cache-Tag': cacheTags.join(','),
      // Tell Netlify to cache the content up to 1 year.
      "Netlify-Cdn-Cache-Control": "public, s-maxage=31536000, must-revalidate",
      // Tell the browser to always revalidate.
      "Cache-Control": "public, max-age=0, must-revalidate"
    }
  });
};

export const config: Config = {
  path: "/files/*"
};

When I load an image using the Netlify domain, I can properly see the cache tag in the response (in the browser). The problem I have is with purging the cache by using the cache tag. I tried the http API and the js API from https://docs.netlify.com/platform/caching/#invalidate-tagged-objects and none worked, I still get the cached image. As soon as I purge the cache without specifying a tag (so for the entire site id), the change is immediately visible.

Is there something I do wrong? I have a feeling that somehow the cache tags set in the edge function response are actually not attached to the resource.

Upvotes: 1

Views: 62

Answers (1)

Vasi Chindris
Vasi Chindris

Reputation: 324

Just as a info, it seems that by setting the cache property to "manual" in the exported config object, the cache purge by tag works:

export const config: Config = {
  path: "/files/*",
  cache: "manual",
};

I have also set it to manual in the netlify.toml file:

[[edge_functions]]
  cache = "manual"
  path = "/files/*"
  function = "proxy"

At least so far, this seems to work good, although it is not super intuitive. Found it out from: https://docs.netlify.com/edge-functions/optional-configuration/#configure-an-edge-function-for-caching

Upvotes: 0

Related Questions