revalidate APIs should make route handlers dynamic (#58466)

ztanner · web-flow · commit 8d4f4fcd3898 · 2023-11-16T11:57:55.000+01:00
### What? Using `revalidateTag` or `revalidatePath` in a route handler will not currently opt the handler into dynamic behavior. This means that if you use these APIs and don't opt into dynamic behavior by some other means, the revalidation call won't do anything as the route handler will be served statically. ### Why? During static generation, we do not currently indicate that usage of these APIs should opt into dynamic usage. ### How? This updates `revalidateTag` to throw a `DynamicUsageError` (similar to our other scenarios, such as search params bailout, headers/cookies, or fetch + revalidate/no-store) Closes NEXT-1712
diff --git a/packages/next/src/server/web/spec-extension/revalidate-tag.ts b/packages/next/src/server/web/spec-extension/revalidate-tag.ts
@@ -2,6 +2,7 @@ import type {
   StaticGenerationAsyncStorage,
   StaticGenerationStore,
 } from '../../../client/components/static-generation-async-storage.external'
+import { staticGenerationBailout } from '../../../client/components/static-generation-bailout'
 
 export function revalidateTag(tag: string) {
   const staticGenerationAsyncStorage = (
@@ -16,6 +17,11 @@ export function revalidateTag(tag: string) {
       `Invariant: static generation store missing in revalidateTag ${tag}`
     )
   }
+
+  // a route that makes use of revalidation APIs should be considered dynamic
+  // as otherwise it would be impossible to revalidate
+  staticGenerationBailout(`revalidateTag ${tag}`)
+
   if (!store.revalidatedTags) {
     store.revalidatedTags = []
   }
diff --git a/test/e2e/app-dir/revalidate-dynamic/app/api/revalidate-path/route.js b/test/e2e/app-dir/revalidate-dynamic/app/api/revalidate-path/route.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+import { revalidatePath } from 'next/cache'
+
+export async function GET(req) {
+  revalidatePath('/')
+  return NextResponse.json({ revalidated: true, now: Date.now() })
+}
diff --git a/test/e2e/app-dir/revalidate-dynamic/app/api/revalidate-tag/route.js b/test/e2e/app-dir/revalidate-dynamic/app/api/revalidate-tag/route.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+import { revalidateTag } from 'next/cache'
+
+export async function GET(req) {
+  revalidateTag('thankyounext')
+  return NextResponse.json({ revalidated: true, now: Date.now() })
+}
diff --git a/test/e2e/app-dir/revalidate-dynamic/app/layout.js b/test/e2e/app-dir/revalidate-dynamic/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/revalidate-dynamic/app/page.js b/test/e2e/app-dir/revalidate-dynamic/app/page.js
@@ -0,0 +1,17 @@
+export default async function Page() {
+  const data = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      next: {
+        tags: ['thankyounext'],
+      },
+    }
+  ).then((res) => res.text())
+
+  return (
+    <>
+      Data:
+      <div id="data-value">{data}</div>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/revalidate-dynamic/revalidate-dynamic.test.ts b/test/e2e/app-dir/revalidate-dynamic/revalidate-dynamic.test.ts
@@ -0,0 +1,36 @@
+import { createNextDescribe } from '../../../lib/e2e-utils'
+
+createNextDescribe(
+  'app-dir revalidate-dynamic',
+  {
+    files: __dirname,
+  },
+  ({ next, isNextStart }) => {
+    if (isNextStart) {
+      it('should correctly mark a route handler that uses revalidateTag as dynamic', async () => {
+        expect(next.cliOutput).toContain('λ /api/revalidate-path')
+        expect(next.cliOutput).toContain('λ /api/revalidate-tag')
+      })
+    }
+
+    it.each(['/api/revalidate-path', '/api/revalidate-tag'])(
+      `should revalidate the data with %s`,
+      async (path) => {
+        const browser = await next.browser('/')
+        const randomNumber = await browser.elementById('data-value').text()
+        await browser.refresh()
+        const randomNumber2 = await browser.elementById('data-value').text()
+
+        expect(randomNumber).toEqual(randomNumber2)
+
+        const revalidateRes = await next.fetch(path)
+        expect((await revalidateRes.json()).revalidated).toBe(true)
+
+        await browser.refresh()
+
+        const randomNumber3 = await browser.elementById('data-value').text()
+        expect(randomNumber).not.toEqual(randomNumber3)
+      }
+    )
+  }
+)

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import type {`
`2`	`2`	`StaticGenerationAsyncStorage,`
`3`	`3`	`StaticGenerationStore,`
`4`	`4`	`} from '../../../client/components/static-generation-async-storage.external'`
	`5`	`+import { staticGenerationBailout } from '../../../client/components/static-generation-bailout'`
`5`	`6`
`6`	`7`	`export function revalidateTag(tag: string) {`
`7`	`8`	`const staticGenerationAsyncStorage = (`
`@@ -16,6 +17,11 @@ export function revalidateTag(tag: string) {`
`16`	`17`	`Invariant: static generation store missing in revalidateTag ${tag}`
`17`	`18`	`)`
`18`	`19`	`}`
	`20`	`+`
	`21`	`+ // a route that makes use of revalidation APIs should be considered dynamic`
	`22`	`+ // as otherwise it would be impossible to revalidate`
	`23`	+ staticGenerationBailout(`revalidateTag ${tag}`)
	`24`	`+`
`19`	`25`	`if (!store.revalidatedTags) {`
`20`	`26`	`store.revalidatedTags = []`
`21`	`27`	`}`