fix: fetch cache tag invalidation (#268)

* fix: ensure fetch cache tags are checked against tag manifest

* feat: use netlify-cache-tag instread of cache-tag

* fix: return false from check stale

* test: add test to catch subsequent revalidate by tags

* test: change cache-tag assertions

Author: orinokai

src/run/handlers/cache.cts

@@ -103,7 +103,7 @@ export class NetlifyCacheHandler implements CacheHandler {
         return null
       }
 
-      const staleByTags = await this.checkCacheEntryStaleByTags(blob, ctx.softTags)
+      const staleByTags = await this.checkCacheEntryStaleByTags(blob, ctx.tags, ctx.softTags)
 
       if (staleByTags) {
         span.addEvent('Stale', { staleByTags })
@@ -197,13 +197,21 @@ export class NetlifyCacheHandler implements CacheHandler {
   /**
    * Checks if a page is stale through on demand revalidated tags
    */
-  private async checkCacheEntryStaleByTags(cacheEntry: CacheHandlerValue, softTags: string[] = []) {
-    const tags =
-      cacheEntry.value && 'headers' in cacheEntry.value
-        ? (cacheEntry.value.headers?.[NEXT_CACHE_TAGS_HEADER] as string)?.split(',') || []
-        : []
+  private async checkCacheEntryStaleByTags(
+    cacheEntry: CacheHandlerValue,
+    tags: string[] = [],
+    softTags: string[] = [],
+  ) {
+    let cacheTags: string[] = []
+
+    if (cacheEntry.value?.kind === 'FETCH') {
+      cacheTags = [...tags, ...softTags]
+    } else if (cacheEntry.value?.kind === 'PAGE' || cacheEntry.value?.kind === 'ROUTE') {
+      cacheTags = (cacheEntry.value.headers?.[NEXT_CACHE_TAGS_HEADER] as string)?.split(',') || []
+    } else {
+      return false
+    }
 
-    const cacheTags = [...tags, ...softTags]
     const allManifests = await Promise.all(
       cacheTags.map(async (tag) => {
         const res = await this.blobStore

src/run/headers.ts

@@ -202,7 +202,9 @@ export const setCacheControlHeaders = (headers: Headers, request: Request) => {
 export const setCacheTagsHeaders = (headers: Headers, request: Request, manifest: TagsManifest) => {
   const path = new URL(request.url).pathname
   const tags = manifest[path]
-  headers.set('cache-tag', tags)
+  if (tags !== undefined) {
+    headers.set('netlify-cache-tag', tags)
+  }
 }
 
 /**

tests/fixtures/server-components/app/static-fetch-1/page.js

@@ -13,7 +13,7 @@ export default async function Page() {
       <h1>Hello, Static Fetch 1</h1>
       <dl>
         <dt>Quote</dt>
-        <dd>{data[0].quote}</dd>
+        <dd data-testid="quote">{data[0].quote}</dd>
         <dt>Time</dt>
         <dd data-testid="date-now">{new Date().toISOString()}</dd>
       </dl>

tests/integration/page-router.test.ts

@@ -59,7 +59,7 @@ test<FixtureTestContext>('Should add pathname to cache-tags for pages route', as
 
   const staticFetch1 = await invokeFunction(ctx, { url: '/static/revalidate-manual' })
 
-  expect(staticFetch1.headers?.['cache-tag']).toBe('_N_T_/static/revalidate-manual')
+  expect(staticFetch1.headers?.['netlify-cache-tag']).toBe('_N_T_/static/revalidate-manual')
 })
 
 test<FixtureTestContext>('Should revalidate path with On-demand Revalidation', async (ctx) => {

tests/integration/revalidate-tags.test.ts

@@ -35,6 +35,7 @@ test<FixtureTestContext>('should revalidate a route by tag', async (ctx) => {
   // test the function call
   const post1 = await invokeFunction(ctx, { url: '/static-fetch-1' })
   const post1Date = load(post1.body)('[data-testid="date-now"]').text()
+  const post1Quote = load(post1.body)('[data-testid="quote"]').text()
   expect(post1.statusCode).toBe(200)
   expect(load(post1.body)('h1').text()).toBe('Hello, Static Fetch 1')
   expect(post1.headers, 'a cache hit on the first invocation of a prerendered page').toEqual(
@@ -53,6 +54,7 @@ test<FixtureTestContext>('should revalidate a route by tag', async (ctx) => {
 
   const post2 = await invokeFunction(ctx, { url: '/static-fetch-1' })
   const post2Date = load(post2.body)('[data-testid="date-now"]').text()
+  const post2Quote = load(post2.body)('[data-testid="quote"]').text()
   expect(post2.statusCode).toBe(200)
   expect(load(post2.body)('h1').text()).toBe('Hello, Static Fetch 1')
   expect(post2.headers, 'a cache miss on the on demand revalidated page').toEqual(
@@ -62,12 +64,14 @@ test<FixtureTestContext>('should revalidate a route by tag', async (ctx) => {
     }),
   )
   expect(post2Date).not.toBe(post1Date)
+  expect(post2Quote).not.toBe(post1Quote)
 
   // it does not wait for the cache.set so we have to manually wait here until the blob storage got populated
   await new Promise<void>((resolve) => setTimeout(resolve, 100))
 
   const post3 = await invokeFunction(ctx, { url: '/static-fetch-1' })
   const post3Date = load(post3.body)('[data-testid="date-now"]').text()
+  const post3Quote = load(post3.body)('[data-testid="quote"]').text()
   expect(post3.statusCode).toBe(200)
   expect(load(post3.body)('h1').text()).toBe('Hello, Static Fetch 1')
   expect(post3.headers, 'a cache hit on the revalidated and regenerated page').toEqual(
@@ -77,4 +81,26 @@ test<FixtureTestContext>('should revalidate a route by tag', async (ctx) => {
     }),
   )
   expect(post3Date).toBe(post2Date)
+  expect(post3Quote).toBe(post2Quote)
+
+  const revalidate2 = await invokeFunction(ctx, { url: '/api/on-demand-revalidate/tag' })
+  expect(revalidate2.statusCode).toBe(200)
+  expect(JSON.parse(revalidate2.body)).toEqual({ revalidated: true, now: expect.any(String) })
+
+  // it does not wait for the revalidation
+  await new Promise<void>((resolve) => setTimeout(resolve, 100))
+
+  const post4 = await invokeFunction(ctx, { url: '/static-fetch-1' })
+  const post4Date = load(post4.body)('[data-testid="date-now"]').text()
+  const post4Quote = load(post4.body)('[data-testid="quote"]').text()
+  expect(post4.statusCode).toBe(200)
+  expect(load(post4.body)('h1').text()).toBe('Hello, Static Fetch 1')
+  expect(post4.headers, 'a cache miss on the on demand revalidated page').toEqual(
+    expect.objectContaining({
+      'cache-status': '"Next.js"; fwd=miss',
+      'netlify-cdn-cache-control': 's-maxage=31536000, stale-while-revalidate=31536000',
+    }),
+  )
+  expect(post4Date).not.toBe(post3Date)
+  expect(post4Quote).not.toBe(post3Quote)
 })

tests/integration/simple-app.test.ts

@@ -66,7 +66,7 @@ test<FixtureTestContext>('Should add cache-tags to prerendered app pages', async
 
   const staticFetch1 = await invokeFunction(ctx, { url: '/other' })
 
-  expect(staticFetch1.headers?.['cache-tag']).toBe(
+  expect(staticFetch1.headers?.['netlify-cache-tag']).toBe(
     '_N_T_/layout,_N_T_/other/layout,_N_T_/other/page,_N_T_/other',
   )
 })
@@ -76,7 +76,7 @@ test<FixtureTestContext>('index should be normalized within the cacheHandler and
   await runPlugin(ctx)
   const index = await invokeFunction(ctx, { url: '/' })
   expect(index.statusCode).toBe(200)
-  expect(index.headers?.['cache-tag']).toBe('_N_T_/layout,_N_T_/page,_N_T_/')
+  expect(index.headers?.['netlify-cache-tag']).toBe('_N_T_/layout,_N_T_/page,_N_T_/')
 })
 
 test<FixtureTestContext>('stale-while-revalidate headers should be normalized to include delta-seconds', async (ctx) => {