fix(fetch-cache): add check for updated tags when checking same cache key

packages/next/src/server/lib/incremental-cache/fetch-cache.ts

@@ -28,6 +28,21 @@ export default class FetchCache implements CacheHandler {
   private cacheEndpoint?: string
   private debug: boolean
 
+  private hasMatchingTags(arr1: string[], arr2: string[]) {
+    if (arr1.length !== arr2.length) return false
+
+    const set1 = new Set(arr1)
+    const set2 = new Set(arr2)
+
+    if (set1.size !== set2.size) return false
+
+    for (let tag of set1) {
+      if (!set2.has(tag)) return false
+    }
+
+    return true
+  }
+
   static isAvailable(ctx: {
     _requestHeaders: CacheHandlerContext['_requestHeaders']
   }) {
@@ -168,8 +183,13 @@ export default class FetchCache implements CacheHandler {
     // on successive requests
     let data = memoryCache?.get(key)
 
-    // get data from fetch cache
-    if (!data && this.cacheEndpoint) {
+    const hasFetchKindAndMatchingTags =
+      data?.value?.kind === 'FETCH' &&
+      this.hasMatchingTags(tags ?? [], data.value.tags ?? [])
+
+    // Get data from fetch cache. Also check if new tags have been
+    // specified with the same cache key (fetch URL)
+    if (this.cacheEndpoint && (!data || !hasFetchKindAndMatchingTags)) {
       try {
         const start = Date.now()
         const fetchParams: NextFetchCacheParams = {
@@ -220,6 +240,11 @@ export default class FetchCache implements CacheHandler {
           throw new Error(`invalid cache value`)
         }
 
+        // if new tags were specified, merge those tags to the existing tags
+        if (cached.kind === 'FETCH') {
+          cached.tags = [...new Set([...(cached.tags ?? []), ...(tags ?? [])])]
+        }
+
         const cacheState = res.headers.get(CACHE_STATE_HEADER)
         const age = res.headers.get('age')
 

test/e2e/app-dir/app-static/app-static.test.ts

@@ -49,6 +49,20 @@ createNextDescribe(
       })
     })
 
+    if (isNextDeploy) {
+      it('should not fetch from memory cache if new tags have been specified', async () => {
+        const res = await next.fetch('/mismatch-tags')
+        expect(res.status).toBe(200)
+
+        const html = await res.text()
+        const $ = cheerio.load(html)
+
+        const data1 = $('#page-data').text()
+        const data2 = $('#page-data-2').text()
+        expect(data1).not.toBe(data2)
+      })
+    }
+
     if (isNextStart) {
       it('should propagate unstable_cache tags correctly', async () => {
         const meta = JSON.parse(
@@ -666,6 +680,8 @@ createNextDescribe(
             "isr-error-handling.rsc",
             "isr-error-handling/page.js",
             "isr-error-handling/page_client-reference-manifest.js",
+            "mismatch-tags/page.js",
+            "mismatch-tags/page_client-reference-manifest.js",
             "no-store/dynamic/page.js",
             "no-store/dynamic/page_client-reference-manifest.js",
             "no-store/static.html",

test/e2e/app-dir/app-static/app/mismatch-tags/page.tsx

@@ -0,0 +1,26 @@
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
+  const data = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      cache: 'no-store',
+      next: { tags: ['thankyounext'] },
+    }
+  ).then((res) => res.text())
+
+  const data2 = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      cache: 'no-store',
+      next: { tags: ['thankyounext', 'justputit'] },
+    }
+  ).then((res) => res.text())
+
+  return (
+    <>
+      <p id="page-data">data: {data}</p>
+      <p id="page-data-2">data: {data2}</p>
+    </>
+  )
+}