Fix revalidateTag() behaviour when invoked in server components (#70446) (#70642)

ijjk · abhi12299 · web-flow · commit 0ffea650b9a0 · 2024-09-30T16:56:32.000-07:00
This backports #70446 to 14-2-1 Fixes #70403 ### What? When `revalidateTag()` is called directly in server components, the cache is not purged for the corresponding tags. Reproduction steps available in #70403 ### How? Check [app-render.tsx](https://github.com/vercel/next.js/compare/canary...abhi12299:fix-revalidatetag-rsc?expand=1#diff-a3e2e024db1faa1b501e0dd6040eaaf0d931cb9878ae0fb0f4c3658daa982768) This issue was introduced in #65296 in this file: [revalidate.ts](https://github.com/vercel/next.js/pull/65296/files#diff-7f0cb5bb30d44b9153d724e31c25859b9aab6cc258b35563a1d9464cd0688283). The lines removed from the file resulted in the revalidation checks to be skipped when there is an RSC request. Also fixed checks on `pendingRevalidates` to also check for `revalidatedTags`. Co-authored-by: Abhishek Mehandiratta <36722596+abhi12299@users.noreply.github.com>
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -348,7 +348,23 @@ async function generateFlight(
     }
   )
 
-  return new FlightRenderResult(flightReadableStream)
+  const resultOptions: RenderResultOptions = {
+    metadata: {},
+  }
+
+  if (
+    ctx.staticGenerationStore.pendingRevalidates ||
+    ctx.staticGenerationStore.revalidatedTags
+  ) {
+    resultOptions.waitUntil = Promise.all([
+      ctx.staticGenerationStore.incrementalCache?.revalidateTag(
+        ctx.staticGenerationStore.revalidatedTags || []
+      ),
+      ...Object.values(ctx.staticGenerationStore.pendingRevalidates || {}),
+    ])
+  }
+
+  return new FlightRenderResult(flightReadableStream, resultOptions)
 }
 
 type RenderToStreamResult = {
@@ -1349,7 +1365,10 @@ async function renderToHTMLOrFlightImpl(
   })
 
   // If we have pending revalidates, wait until they are all resolved.
-  if (staticGenerationStore.pendingRevalidates) {
+  if (
+    staticGenerationStore.pendingRevalidates ||
+    staticGenerationStore.revalidatedTags
+  ) {
     options.waitUntil = Promise.all([
       staticGenerationStore.incrementalCache?.revalidateTag(
         staticGenerationStore.revalidatedTags || []
diff --git a/packages/next/src/server/app-render/flight-render-result.ts b/packages/next/src/server/app-render/flight-render-result.ts
@@ -1,11 +1,18 @@
 import { RSC_CONTENT_TYPE_HEADER } from '../../client/components/app-router-headers'
-import RenderResult from '../render-result'
+import RenderResult, { type RenderResultOptions } from '../render-result'
 
 /**
  * Flight Response is always set to RSC_CONTENT_TYPE_HEADER to ensure it does not get interpreted as HTML.
  */
 export class FlightRenderResult extends RenderResult {
-  constructor(response: string | ReadableStream<Uint8Array>) {
-    super(response, { contentType: RSC_CONTENT_TYPE_HEADER, metadata: {} })
+  constructor(
+    response: string | ReadableStream<Uint8Array>,
+    options?: RenderResultOptions
+  ) {
+    super(response, {
+      contentType: RSC_CONTENT_TYPE_HEADER,
+      waitUntil: options?.waitUntil,
+      metadata: options?.metadata ?? {},
+    })
   }
 }
diff --git a/test/e2e/app-dir/revalidatetag-rsc/app/RevalidateViaForm.tsx b/test/e2e/app-dir/revalidatetag-rsc/app/RevalidateViaForm.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { revalidate } from './actions/revalidate'
+
+export default function RevalidateViaForm({ tag }: { tag: string }) {
+  const handleRevalidate = async () => {
+    await revalidate(tag)
+  }
+
+  return (
+    <form action={handleRevalidate}>
+      <button type="submit" id="submit-form" className="underline">
+        Revalidate via form
+      </button>
+    </form>
+  )
+}
diff --git a/test/e2e/app-dir/revalidatetag-rsc/app/actions/revalidate.ts b/test/e2e/app-dir/revalidatetag-rsc/app/actions/revalidate.ts
@@ -0,0 +1,11 @@
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export const revalidate = async (
+  tag: string
+): Promise<{ revalidated: boolean }> => {
+  revalidateTag(tag)
+
+  return { revalidated: true }
+}
diff --git a/test/e2e/app-dir/revalidatetag-rsc/app/layout.tsx b/test/e2e/app-dir/revalidatetag-rsc/app/layout.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/revalidatetag-rsc/app/page.tsx b/test/e2e/app-dir/revalidatetag-rsc/app/page.tsx
@@ -0,0 +1,24 @@
+import RevalidateViaForm from './RevalidateViaForm'
+import Link from 'next/link'
+
+export default async function Page() {
+  const data = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      next: {
+        tags: ['data'],
+        revalidate: false,
+      },
+    }
+  ).then((res) => res.text())
+
+  return (
+    <div>
+      <span id="data">{data}</span>
+      <RevalidateViaForm tag="data" />
+      <Link href="/revalidate_via_page?tag=data" id="revalidate-via-page">
+        Revalidate via page
+      </Link>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/revalidatetag-rsc/app/revalidate_via_page/page.tsx b/test/e2e/app-dir/revalidatetag-rsc/app/revalidate_via_page/page.tsx
@@ -0,0 +1,24 @@
+'use server'
+
+import Link from 'next/link'
+import { revalidateTag } from 'next/cache'
+
+const RevalidateViaPage = async ({
+  searchParams,
+}: {
+  searchParams: Promise<{ tag: string }>
+}) => {
+  const { tag } = await searchParams
+  revalidateTag(tag)
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <pre>Tag [{tag}] has been revalidated</pre>
+      <Link href="/" id="home">
+        To Home
+      </Link>
+    </div>
+  )
+}
+
+export default RevalidateViaPage
diff --git a/test/e2e/app-dir/revalidatetag-rsc/next.config.js b/test/e2e/app-dir/revalidatetag-rsc/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/revalidatetag-rsc/revalidatetag-rsc.test.ts b/test/e2e/app-dir/revalidatetag-rsc/revalidatetag-rsc.test.ts
@@ -0,0 +1,42 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+describe('revalidateTag-rsc', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should revalidate fetch cache if revalidateTag invoked via server action', async () => {
+    const browser = await next.browser('/')
+    const randomNumber = await browser.elementById('data').text()
+    await browser.refresh()
+    const randomNumber2 = await browser.elementById('data').text()
+    expect(randomNumber).toEqual(randomNumber2)
+
+    await browser.elementByCss('#submit-form').click()
+
+    await retry(async () => {
+      const randomNumber3 = await browser.elementById('data').text()
+      expect(randomNumber3).not.toEqual(randomNumber)
+    })
+  })
+
+  it('should revalidate fetch cache if revalidateTag invoked via server component', async () => {
+    const browser = await next.browser('/')
+    const randomNumber = await browser.elementById('data').text()
+    await browser.refresh()
+    const randomNumber2 = await browser.elementById('data').text()
+    expect(randomNumber).toEqual(randomNumber2)
+
+    await browser.elementByCss('#revalidate-via-page').click()
+    // need to refresh to evict client router cache
+    await browser.waitForElementByCss('#home')
+    await browser.refresh()
+
+    await browser.elementByCss('#home').click()
+
+    await browser.waitForElementByCss('#data')
+    const randomNumber3 = await browser.elementById('data').text()
+    expect(randomNumber3).not.toEqual(randomNumber)
+  })
+})
