Fix usage of router.refresh() with Draft Mode in App Router (#50941)

After enabling Draft Mode, `router.refresh()` was incorrectly causing the page to crash and do a full page refresh.

This PR fixes this case.

Co-authored-by: Steven <229881+styfle@users.noreply.github.com>

packages/next/src/server/base-server.ts

@@ -1351,25 +1351,6 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       return null
     }
 
-    if (isAppPath) {
-      res.setHeader('vary', RSC_VARY_HEADER)
-
-      if (isSSG && req.headers[RSC.toLowerCase()]) {
-        if (!this.minimalMode) {
-          isDataReq = true
-        }
-        // strip header so we generate HTML still
-        if (
-          !isEdgeRuntime(opts.runtime) ||
-          (this.serverOptions as any).webServerConfig
-        ) {
-          for (const param of FLIGHT_PARAMETERS) {
-            delete req.headers[param.toString().toLowerCase()]
-          }
-        }
-      }
-    }
-
     delete query.__nextDataReq
 
     // normalize req.url for SSG paths as it is not exposed
@@ -1492,6 +1473,25 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       }
     }
 
+    if (isAppPath) {
+      res.setHeader('vary', RSC_VARY_HEADER)
+
+      if (!isPreviewMode && isSSG && req.headers[RSC.toLowerCase()]) {
+        if (!this.minimalMode) {
+          isDataReq = true
+        }
+        // strip header so we generate HTML still
+        if (
+          !isEdgeRuntime(opts.runtime) ||
+          (this.serverOptions as any).webServerConfig
+        ) {
+          for (const param of FLIGHT_PARAMETERS) {
+            delete req.headers[param.toString().toLowerCase()]
+          }
+        }
+      }
+    }
+
     let isOnDemandRevalidate = false
     let revalidateOnlyGenerated = false
 

test/e2e/app-dir/draft-mode/app/enable-and-redirect/route.ts

@@ -1,7 +1,8 @@
 import { draftMode } from 'next/headers'
 import { redirect } from 'next/navigation'
 
-export function GET() {
+export function GET(req: Request) {
   draftMode().enable()
-  return redirect('/some-other-page')
+  const to = new URL(req.url).searchParams.get('to') ?? '/some-other-page'
+  return redirect(to)
 }

test/e2e/app-dir/draft-mode/app/generate/[id]/page.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { RouteRefresher } from '../../../components/RouterRefresh'
+
+export default async function Page() {
+  return (
+    <main>
+      <h1>With generateStaticParams</h1>
+      <RouteRefresher />
+    </main>
+  )
+}
+
+export function generateStaticParams() {
+  return [{ id: 'foo' }]
+}

test/e2e/app-dir/draft-mode/components/RouterRefresh.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
+export function RouteRefresher() {
+  const router = useRouter()
+
+  return (
+    <button id="refresh" onClick={() => router.refresh()}>
+      Refresh
+    </button>
+  )
+}

test/e2e/app-dir/draft-mode/draft-mode-node.test.ts

@@ -1,4 +1,5 @@
 import { createNextDescribe } from 'e2e-utils'
+import { waitFor } from 'next-test-utils'
 
 createNextDescribe(
   'app dir - draft mode',
@@ -84,5 +85,23 @@ createNextDescribe(
       const res = await next.fetch('/state', opts)
       expect(await res.text()).toBe('ENABLED')
     })
+
+    it('should not perform full page navigation on router.refresh()', async () => {
+      const to = encodeURIComponent('/generate/foo')
+      const browser = await next.browser(`/enable-and-redirect?to=${to}`)
+      await browser.eval('window._test = 42')
+      await browser.elementById('refresh').click()
+
+      const start = Date.now()
+      while (Date.now() - start < 5000) {
+        const value = await browser.eval('window._test')
+        if (value !== 42) {
+          throw new Error('Detected a full page navigation')
+        }
+        await waitFor(200)
+      }
+
+      expect(await browser.eval('window._test')).toBe(42)
+    })
   }
 )