Fix hydration middleware effects

packages/next/shared/lib/router/router.ts

@@ -1133,28 +1133,35 @@ export default class Router implements BaseRouter {
 
     resolvedAs = delLocale(delBasePath(resolvedAs), this.locale)
 
-    const effect = await this._preflightRequest({
-      as,
-      cache: process.env.NODE_ENV === 'production',
-      pages,
-      pathname,
-      query,
-    })
+    /**
+     * If the route update was triggered for client-side hydration then
+     * do not check the preflight request. Otherwise when rendering
+     * a page with refresh it might get into an infinite loop.
+     */
+    if ((options as any)._h !== 1) {
+      const effect = await this._preflightRequest({
+        as,
+        cache: process.env.NODE_ENV === 'production',
+        pages,
+        pathname,
+        query,
+      })
 
-    if (effect.type === 'rewrite') {
-      query = { ...query, ...effect.parsedAs.query }
-      resolvedAs = effect.asPath
-      pathname = effect.resolvedHref
-      parsed.pathname = effect.resolvedHref
-      url = formatWithValidation(parsed)
-    } else if (effect.type === 'redirect' && effect.newAs) {
-      return this.change(method, effect.newUrl, effect.newAs, options)
-    } else if (effect.type === 'redirect' && effect.destination) {
-      window.location.href = effect.destination
-      return new Promise(() => {})
-    } else if (effect.type === 'refresh') {
-      window.location.href = as
-      return new Promise(() => {})
+      if (effect.type === 'rewrite') {
+        query = { ...query, ...effect.parsedAs.query }
+        resolvedAs = effect.asPath
+        pathname = effect.resolvedHref
+        parsed.pathname = effect.resolvedHref
+        url = formatWithValidation(parsed)
+      } else if (effect.type === 'redirect' && effect.newAs) {
+        return this.change(method, effect.newUrl, effect.newAs, options)
+      } else if (effect.type === 'redirect' && effect.destination) {
+        window.location.href = effect.destination
+        return new Promise(() => {})
+      } else if (effect.type === 'refresh') {
+        window.location.href = as
+        return new Promise(() => {})
+      }
     }
 
     const route = removePathTrailingSlash(pathname)

test/integration/middleware/core/pages/interface/_middleware.js

@@ -53,6 +53,12 @@ export async function middleware(request) {
     }
   }
 
+  if (url.pathname.endsWith('/root-subrequest')) {
+    return fetch(
+      `http://${request.headers.get('host')}/interface/root-subrequest`
+    )
+  }
+
   return new Response(null, {
     headers: {
       'req-url-basepath': request.nextUrl.basePath,

test/integration/middleware/core/test/index.test.js

@@ -438,6 +438,15 @@ function interfaceTests(locale = '') {
       expect(res.headers.get('req-url-locale')).toBe(locale.slice(1))
     }
   })
+
+  it(`${locale} renders correctly rewriting with a root subrequest`, async () => {
+    const browser = await webdriver(
+      context.appPort,
+      '/interface/root-subrequest'
+    )
+    const element = await browser.elementByCss('.title')
+    expect(await element.text()).toEqual('Dynamic route')
+  })
 }
 
 function getCookieFromResponse(res, cookieName) {