fix: improved cdn cache hooks for dynamic 404 pages

src/run/handlers/cache.cts

@@ -121,11 +121,12 @@ export class NetlifyCacheHandler implements CacheHandlerForMultipleVersions {
   }
 
   private captureCacheTags(cacheValue: NetlifyIncrementalCacheValue | null, key: string) {
+    const requestContext = getRequestContext()
+
     if (!cacheValue) {
       return
     }
 
-    const requestContext = getRequestContext()
     // Bail if we can't get request context
     if (!requestContext) {
       return
@@ -393,7 +394,7 @@ export class NetlifyCacheHandler implements CacheHandlerForMultipleVersions {
 
       await this.cacheStore.set(key, { lastModified, value }, 'blobStore.set')
 
-      if (data?.kind === 'PAGE' || data?.kind === 'PAGES') {
+      if (!data || data?.kind === 'PAGE' || data?.kind === 'PAGES') {
         const requestContext = getRequestContext()
         if (requestContext?.didPagesRouterOnDemandRevalidate) {
           // encode here to deal with non ASCII characters in the key

src/run/handlers/server.ts

@@ -132,7 +132,7 @@ export default async (
     }
 
     setCacheControlHeaders(response, request, requestContext, nextConfig)
-    setCacheTagsHeaders(response.headers, requestContext)
+    setCacheTagsHeaders(response.headers, request, requestContext)
     setVaryHeaders(response.headers, request, nextConfig)
     setCacheStatusHeader(response.headers, nextCache)
 

src/run/headers.ts

@@ -220,7 +220,6 @@ export const setCacheControlHeaders = (
       .log('NetlifyHeadersHandler.trailingSlashRedirect')
   }
 
-  const cacheControl = headers.get('cache-control')
   if (status === 404) {
     if (request.url.endsWith('.php')) {
       // temporary CDN Cache Control handling for bot probes on PHP files
@@ -241,6 +240,8 @@ export const setCacheControlHeaders = (
     }
   }
 
+  const cacheControl = headers.get('cache-control')
+
   if (
     cacheControl !== null &&
     ['GET', 'HEAD'].includes(request.method) &&
@@ -273,6 +274,7 @@ export const setCacheControlHeaders = (
     ['GET', 'HEAD'].includes(request.method) &&
     !headers.has('cdn-cache-control') &&
     !headers.has('netlify-cdn-cache-control') &&
+    !new URL(request.url).pathname.startsWith('/api/') &&
     requestContext.usedFsReadForNonFallback
   ) {
     // handle CDN Cache Control on static files
@@ -281,13 +283,24 @@ export const setCacheControlHeaders = (
   }
 }
 
-export const setCacheTagsHeaders = (headers: Headers, requestContext: RequestContext) => {
-  if (
-    requestContext.responseCacheTags &&
-    (headers.has('cache-control') || headers.has('netlify-cdn-cache-control'))
-  ) {
+export const setCacheTagsHeaders = (
+  headers: Headers,
+  request: Request,
+  requestContext: RequestContext,
+) => {
+  if (!headers.has('cache-control') && !headers.has('netlify-cdn-cache-control')) {
+    return
+  }
+
+  if (requestContext.responseCacheTags) {
     headers.set('netlify-cache-tag', requestContext.responseCacheTags.join(','))
+    return
   }
+
+  const key = new URL(request.url).pathname
+  const cacheTag = `_N_T_${key === '/index' ? '/' : encodeURI(key)}`
+  console.log('setCacheTagsHeaders', 'netlify-cache-tag', key)
+  headers.set('netlify-cache-tag', cacheTag)
 }
 
 /**

tests/e2e/dynamic-cms.test.ts

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test'
+import { test } from '../utils/playwright-helpers.js'
+
+test.describe('Dynamic CMS', () => {
+  test('Invalidates 404 pages from durable cache', async ({ page, dynamicCms }) => {
+    // 1. Verify the status and headers of the dynamic page
+    const response1 = await page.goto(new URL('/content/blog', dynamicCms.url).href)
+    const headers1 = response1?.headers() || {}
+
+    expect(response1?.status()).toEqual(404)
+    expect(headers1['cache-control']).toEqual('public,max-age=0,must-revalidate')
+    expect(headers1['cache-status']).toEqual(
+      '"Next.js"; fwd=miss, "Netlify Durable"; fwd=uri-miss; stored, "Netlify Edge"; fwd=miss',
+    )
+    expect(headers1['netlify-cache-tag']).toEqual('_n_t_/content/blog')
+    expect(headers1['netlify-cdn-cache-control']).toEqual('s-maxage=31536000, durable')
+
+    // 2. Publish the blob, revalidate the dynamic page, and wait to regenerate
+    await page.goto(new URL('/cms/publish', dynamicCms.url).href)
+    await page.goto(new URL('/api/revalidate?path=/content/blog', dynamicCms.url).href)
+    await page.waitForTimeout(1000)
+
+    // 3. Verify the status and headers of the dynamic page
+    const response2 = await page.goto(new URL('/content/blog', dynamicCms.url).href)
+    const headers2 = response2?.headers() || {}
+
+    expect(response2?.status()).toEqual(200)
+    expect(headers2['cache-control']).toEqual('public,max-age=0,must-revalidate')
+    expect(headers2['cache-status']).toMatch(
+      /"Next.js"; hit, "Netlify Durable"; fwd=stale; ttl=[0-9]+; stored, "Netlify Edge"; fwd=stale/,
+    )
+    expect(headers2['netlify-cache-tag']).toEqual('_n_t_/content/blog')
+    expect(headers2['netlify-cdn-cache-control']).toEqual('s-maxage=31536000, durable')
+
+    // 4. Unpublish the blob, revalidate the dynamic page, and wait to regenerate
+    await page.goto(new URL('/cms/unpublish', dynamicCms.url).href)
+    await page.goto(new URL('/api/revalidate?path=/content/blog', dynamicCms.url).href)
+    await page.waitForTimeout(1000)
+
+    // 5. Verify the status and headers of the dynamic page
+    const response3 = await page.goto(new URL('/content/blog', dynamicCms.url).href)
+    const headers3 = response3?.headers() || {}
+
+    expect(response3?.status()).toEqual(404)
+    expect(headers3['cache-control']).toEqual('public,max-age=0,must-revalidate')
+    expect(headers3['cache-status']).toMatch(
+      /"Next.js"; fwd=miss, "Netlify Durable"; fwd=stale; ttl=[0-9]+; stored, "Netlify Edge"; fwd=stale/,
+    )
+    expect(headers3['netlify-cache-tag']).toEqual('_n_t_/content/blog')
+    expect(headers3['netlify-cdn-cache-control']).toEqual('s-maxage=31536000, durable')
+  })
+})

tests/fixtures/dynamic-cms/README.md

@@ -0,0 +1 @@
+This fixture is meant to emulate dynamic content responses of a CMS-backed next site

tests/fixtures/dynamic-cms/netlify/functions/cms.ts

@@ -0,0 +1,24 @@
+import { getDeployStore } from '@netlify/blobs'
+import { Context } from '@netlify/functions'
+
+// publish or unpublish "cms content" depending on the sent operation
+export default async function handler(_request: Request, context: Context) {
+  const store = getDeployStore({ name: 'cms-content', consistency: 'strong' })
+  const BLOB_KEY = 'key'
+
+  const operation = context.params['operation']
+
+  if (operation === 'publish') {
+    await store.setJSON(BLOB_KEY, { content: true })
+  }
+
+  if (operation === 'unpublish') {
+    await store.delete(BLOB_KEY)
+  }
+
+  return Response.json({ ok: true })
+}
+
+export const config = {
+  path: '/cms/:operation',
+}

tests/fixtures/dynamic-cms/next.config.ts

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  generateBuildId: () => 'build-id',
+}
+
+module.exports = nextConfig

tests/fixtures/dynamic-cms/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "dynamic-cms",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "next build",
+    "dev": "next dev",
+    "build": "next build"
+  },
+  "dependencies": {
+    "@netlify/blobs": "^8.1.0",
+    "@netlify/functions": "^2.7.0",
+    "@netlify/plugin-nextjs": "^5.10.1",
+    "netlify-cli": "^19.0.3",
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.13.13",
+    "@types/react": "19.0.12",
+    "typescript": "5.8.2"
+  }
+}

tests/fixtures/dynamic-cms/pages/404.js

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <p>Custom 404 page</p>
+}

tests/fixtures/dynamic-cms/pages/api/revalidate.js

@@ -0,0 +1,9 @@
+export default async function handler(req, res) {
+  try {
+    const pathToPurge = req.query.path ?? '/static/revalidate-manual'
+    await res.revalidate(pathToPurge)
+    return res.json({ code: 200, message: 'success' })
+  } catch (err) {
+    return res.status(500).send({ code: 500, message: err.message })
+  }
+}

tests/fixtures/dynamic-cms/pages/content/[...slug].js

@@ -0,0 +1,37 @@
+import { getDeployStore } from '@netlify/blobs'
+
+const Content = ({ value }) => (
+  <div>
+    <p>
+      <span>{JSON.stringify(value)}</span>
+    </p>
+  </div>
+)
+
+export async function getStaticProps() {
+  const store = getDeployStore({ name: 'cms-content', consistency: 'strong' })
+  const BLOB_KEY = 'key'
+
+  const value = await store.get(BLOB_KEY, { type: 'json' })
+
+  if (!value) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: {
+      value: value,
+    },
+  }
+}
+
+export const getStaticPaths = () => {
+  return {
+    paths: [],
+    fallback: 'blocking', // false or "blocking"
+  }
+}
+
+export default Content

tests/utils/create-e2e-fixture.ts

@@ -440,5 +440,6 @@ export const fixtureFactories = {
       publishDirectory: 'apps/site/.next',
       smoke: true,
     }),
+  dynamicCms: () => createE2EFixture('dynamic-cms'),
   after: () => createE2EFixture('after'),
 }