revalidate APIs should make route handlers dynamic (#58466)

### 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
vercel · Nov 16, 2023 · 8d4f4fc · 8d4f4fc
1 parent 02103fe
commit 8d4f4fc
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 0 deletions.
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)
+      }
+    )
+  }
+)