I was trying to use the netlify-cdn-cache-control header and I kept checking the network tab and I seen it was not showing up at all and I kept thinking I was doing something wrong.
I read the netlify article on Cache-tags & Purge API on Netlify and I checked the cache tag demo source code and when I ran this and checked the network tab again I see there is a Cache-Status: "Netlify Edge"; hit but no netlify-cdn-cache-control header. Is there a reason that this header does not show up in the response?
The source code for the file netlify/functions/cache-tag.ts looks like this
import type { Config } from "@netlify/functions";
export default async () => {
const resp = await fetch(
"https://fakestoreapi.com/products/category/electronics?sort=desc"
);
const json = await resp.json();
const body = `<!doctype html><html>
<head>
<title>Cache-Tag</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<h1>Cache-Tag</h1>
<p>The <strong>Cache-Tag</strong> header allows you to tag content across Netlify's CDN so you can invalidate it more granularly. You can define multiple comma-separated cache tags for a single asset or use multiple Cache-Tag headers on the response.
<p>This page is tagged with <strong>"Cache-Tag: electronics,cache-tag-demo"</strong>, so you can use the <strong>electronics</strong> tag to purge only this page without affecting the rest of the content on this site, or use <strong>cache-tag-api-demo</strong> to purge all generated pages on this site.</p>
<h2>Products</h2>
<p>Electronic products from <a href="https://fakestoreapi.com/">https://fakestoreapi.com/</a> were fetched at <strong>${new Date()}</strong>:</p>
<ul>${json.map((item) => `<li>${item.title}</li>`).join("\n")}</ul>
<br>
<div class="purge_buttons">
<form action="/purge?tag=electronics" method="post">
<button name="purge">Purge with electronics tag</button>
</form>
<form action="/purge?tag=cache-tag-api-demo" method="post">
<button name="purge">Purge with cache-tag-demo tag</button>
</form>
</div>
<br>
<p><a href="/">Go back</a></p>
</body><html>`;
return new Response(body, {
headers: {
"Content-Type": "text/html",
"Cache-Tag": "electronics,cache-tag-demo",
"Netlify-Cdn-Cache-Control": "public, s-maxage=31536000, must-revalidate", // Tell Netlify to cache the content up to 1 year
"Cache-Control": "public, max-age=0, must-revalidate" // Tell the browser to always revalidate
}
});
};
export const config: Config = {
path: "/cache-tag"
};
When I check the response for cache-tag it shows the following response headers:
Age: 4
Cache-Control: public,max-age=0,must-revalidate
Cache-Status: "Netlify Edge"; hit
Cache-Tag: electronics,cache-tag-demo
Content-Encoding: br
Content-Length: 835
Content-Type: text/html
Date: Mon, 20 May 2024 22:15:51 GMT
Netlify-Vary: query
Server: Netlify
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Nf-Request-Id: 01HYC16J5YKHM5WTEEW9254B7P