From 8d4f4fcd389866482250f08e207385440a4503ba Mon Sep 17 00:00:00 2001
From: Zack Tanner <zacktanner@gmail.com>
Date: Thu, 16 Nov 2023 02:57:55 -0800
Subject: [PATCH] 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
---
 .../web/spec-extension/revalidate-tag.ts      |  6 ++++
 .../app/api/revalidate-path/route.js          |  7 ++++
 .../app/api/revalidate-tag/route.js           |  7 ++++
 .../app-dir/revalidate-dynamic/app/layout.js  |  7 ++++
 .../app-dir/revalidate-dynamic/app/page.js    | 17 +++++++++
 .../revalidate-dynamic.test.ts                | 36 +++++++++++++++++++
 6 files changed, 80 insertions(+)
 create mode 100644 test/e2e/app-dir/revalidate-dynamic/app/api/revalidate-path/route.js
 create mode 100644 test/e2e/app-dir/revalidate-dynamic/app/api/revalidate-tag/route.js
 create mode 100644 test/e2e/app-dir/revalidate-dynamic/app/layout.js
 create mode 100644 test/e2e/app-dir/revalidate-dynamic/app/page.js
 create mode 100644 test/e2e/app-dir/revalidate-dynamic/revalidate-dynamic.test.ts

diff --git a/packages/next/src/server/web/spec-extension/revalidate-tag.ts b/packages/next/src/server/web/spec-extension/revalidate-tag.ts
index 620545987eae6..fcd3be4fb80c3 100644
--- 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
new file mode 100644
index 0000000000000..602822742a442
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..5fc2a51a59a52
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..0ea378c6fcbbd
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..2d510fb21aba8
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..c084d67a216e9
--- /dev/null
+++ 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)
+      }
+    )
+  }
+)