ensure fetch is patched before preloading entries (#72363)

ztanner · web-flow · commit 4d37f665f6de · 2024-11-07T13:04:11.000-08:00
If a user creates a custom fetch implementation in module scope, the logic to preload entries during `next start` will result in fetch not being patched before the userland implementation. As a result, it won't opt into any caching heuristics from our patched fetch. Fixes #71881 (in addition to the other PR in this stack)
diff --git a/packages/next/src/server/next-server.ts b/packages/next/src/server/next-server.ts
@@ -277,6 +277,11 @@ export default class NextNodeServer extends BaseServer<
     for (const page of Object.keys(appPathsManifest || {})) {
       await loadComponents({ distDir: this.distDir, page, isAppPath: true })
         .then(async ({ ComponentMod }) => {
+          // we need to ensure fetch is patched before we require the page,
+          // otherwise if the fetch is patched by user code, we will be patching it
+          // too late and there won't be any caching behaviors
+          ComponentMod.patchFetch()
+
           const webpackRequire = ComponentMod.__next_app__.require
           if (webpackRequire?.m) {
             for (const id of Object.keys(webpackRequire.m)) {
diff --git a/test/production/app-dir/app-fetch-patching/app-fetch-patching.test.ts b/test/production/app-dir/app-fetch-patching/app-fetch-patching.test.ts
@@ -0,0 +1,29 @@
+import { waitFor, retry } from 'next-test-utils'
+import { nextTestSetup } from 'e2e-utils'
+
+describe('app-fetch-deduping', () => {
+  const { next } = nextTestSetup({ files: __dirname })
+
+  it('should still properly cache fetches when the user has a custom fetch implementation', async () => {
+    const browser = await next.browser('/')
+
+    let currentValue: string | undefined
+    await retry(async () => {
+      const initialRandom = await browser.elementById('random').text()
+      expect(initialRandom).toMatch(/^0\.\d+$/)
+
+      await browser.refresh()
+      currentValue = await browser.elementById('random').text()
+      expect(currentValue).toBe(initialRandom)
+    })
+
+    // wait for the revalidation period
+    await waitFor(3000)
+
+    await retry(async () => {
+      await browser.refresh()
+      const finalValue = await browser.elementById('random').text()
+      expect(finalValue).not.toBe(currentValue)
+    })
+  })
+})
diff --git a/test/production/app-dir/app-fetch-patching/app/layout.js b/test/production/app-dir/app-fetch-patching/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/app-dir/app-fetch-patching/app/page.js b/test/production/app-dir/app-fetch-patching/app/page.js
@@ -0,0 +1,36 @@
+import { cookies } from 'next/headers'
+import { Suspense } from 'react'
+
+const patchFetch = (originalFetch) => async (url, options) => {
+  const res = await originalFetch(url, options)
+  return res
+}
+
+const customFetch = patchFetch(fetch)
+
+export default async function Page() {
+  const data = await customFetch(
+    'https://next-data-api-endpoint.vercel.app/api/random?revalidate-3',
+    {
+      next: {
+        revalidate: 3,
+      },
+    }
+  ).then((res) => res.text())
+
+  return (
+    <>
+      <div id="random">{data}</div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <DynamicThing />
+      </Suspense>
+    </>
+  )
+}
+
+async function DynamicThing() {
+  const cookieStore = await cookies()
+  const cookie = cookieStore.get('name')
+
+  return <div>{cookie}</div>
+}
