Update tags limit handling for max items

docs/02-app/02-api-reference/04-functions/fetch.mdx

@@ -98,7 +98,7 @@ Set the cache lifetime of a resource (in seconds).
 fetch(`https://...`, { next: { tags: ['collection'] } })
 ```
 
-Set the cache tags of a resource. Data can then be revalidated on-demand using [`revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/revalidateTag). The max length for a custom tag is 256 characters.
+Set the cache tags of a resource. Data can then be revalidated on-demand using [`revalidateTag`](https://nextjs.org/docs/app/api-reference/functions/revalidateTag). The max length for a custom tag is 256 characters and the max tag items is 64.
 
 ## Version History
 

packages/next/src/lib/constants.ts

@@ -18,6 +18,9 @@ export const NEXT_CACHE_REVALIDATED_TAGS_HEADER = 'x-next-revalidated-tags'
 export const NEXT_CACHE_REVALIDATE_TAG_TOKEN_HEADER =
   'x-next-revalidate-tag-token'
 
+// if these change make sure we update the related
+// documentation as well
+export const NEXT_CACHE_TAG_MAX_ITEMS = 64
 export const NEXT_CACHE_TAG_MAX_LENGTH = 256
 export const NEXT_CACHE_SOFT_TAG_MAX_LENGTH = 1024
 export const NEXT_CACHE_IMPLICIT_TAG_ID = '_N_T_'

packages/next/src/server/lib/patch-fetch.ts

@@ -9,6 +9,7 @@ import { getTracer, SpanKind } from './trace/tracer'
 import {
   CACHE_ONE_YEAR,
   NEXT_CACHE_IMPLICIT_TAG_ID,
+  NEXT_CACHE_TAG_MAX_ITEMS,
   NEXT_CACHE_TAG_MAX_LENGTH,
 } from '../../lib/constants'
 import * as Log from '../../build/output/log'
@@ -53,7 +54,9 @@ export function validateTags(tags: any[], description: string) {
     reason: string
   }> = []
 
-  for (const tag of tags) {
+  for (let i = 0; i < tags.length; i++) {
+    const tag = tags[i]
+
     if (typeof tag !== 'string') {
       invalidTags.push({ tag, reason: 'invalid type, must be a string' })
     } else if (tag.length > NEXT_CACHE_TAG_MAX_LENGTH) {
@@ -64,6 +67,14 @@ export function validateTags(tags: any[], description: string) {
     } else {
       validTags.push(tag)
     }
+
+    if (validTags.length > NEXT_CACHE_TAG_MAX_ITEMS) {
+      console.warn(
+        `Warning: exceeded max tag count for ${description}, dropped tags:`,
+        tags.slice(i).join(', ')
+      )
+      break
+    }
   }
 
   if (invalidTags.length > 0) {

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

@@ -3,7 +3,13 @@ import cheerio from 'cheerio'
 import { promisify } from 'util'
 import { join } from 'path'
 import { createNextDescribe } from 'e2e-utils'
-import { check, fetchViaHTTP, normalizeRegEx, waitFor } from 'next-test-utils'
+import {
+  check,
+  fetchViaHTTP,
+  normalizeRegEx,
+  retry,
+  waitFor,
+} from 'next-test-utils'
 import stripAnsi from 'strip-ansi'
 
 const glob = promisify(globOrig)
@@ -34,6 +40,15 @@ createNextDescribe(
       }
     })
 
+    it('should warn for too many cache tags', async () => {
+      const res = await next.fetch('/too-many-cache-tags')
+      expect(res.status).toBe(200)
+      await retry(() => {
+        expect(next.cliOutput).toContain('exceeded max tag count for')
+        expect(next.cliOutput).toContain('tag-65')
+      })
+    })
+
     if (isNextStart) {
       it('should propagate unstable_cache tags correctly', async () => {
         const meta = JSON.parse(
@@ -696,6 +711,8 @@ createNextDescribe(
             "static-to-dynamic-error-forced/[id]/page_client-reference-manifest.js",
             "static-to-dynamic-error/[id]/page.js",
             "static-to-dynamic-error/[id]/page_client-reference-manifest.js",
+            "too-many-cache-tags/page.js",
+            "too-many-cache-tags/page_client-reference-manifest.js",
             "unstable-cache/dynamic-undefined/page.js",
             "unstable-cache/dynamic-undefined/page_client-reference-manifest.js",
             "unstable-cache/dynamic/page.js",

test/e2e/app-dir/app-static/app/too-many-cache-tags/page.tsx

@@ -0,0 +1,22 @@
+export const revalidate = 0
+
+export default async function Page() {
+  const tags: string[] = []
+
+  for (let i = 0; i < 96; i++) {
+    tags.push(`tag-${i}`)
+  }
+  const data = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      next: { tags },
+    }
+  ).then((res) => res.text())
+
+  return (
+    <>
+      <p>too-many-cache-tags</p>
+      <p>{data}</p>
+    </>
+  )
+}