如何防止 router.push() 在 Next.js 中间件中缓存重定向到的路由？

我认为通过路由器进行客户端导航和使用中间件存在问题。 不知何故，路由器会记住它第一次被重定向的时间，并且在接下来的时间里它会直接导航到该路由，而无需通过中间件。

当我刷新浏览器时，这种情况就会停止发生。 如果我在开发环境中运行，也不会发生这种情况。

我想强制路由器每次都进入中间件以重新评估重定向的位置。

重现：

1. Go to /反复从浏览器搜索栏中搜索。您有 50% 的机会被重定向到/dashboard以及 50% 至/profile因为middleware.ts
2. Go to /login并单击登录按钮。这将使router.push('/')并被重定向到/dashboard or /profile.
3. 单击注销按钮。这将使router.push('/login').
4. 下次登录时将始终重定向到相同的路由。

这是我的中间件.ts:

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/') {
    if (Math.random() > 0.5) {
      return NextResponse.redirect(new URL('/dashboard', request.url))
    } else {
      return NextResponse.redirect(new URL('/profile', request.url))
    }
  }
}

My 登录.tsx:

import { NextPage } from 'next'
import { useRouter } from 'next/router'

const LoginPage: NextPage<{}> = () => {

  const router = useRouter()
  const login = () => {
    router.push('/')
  }

  return (
    <div>
      <h1>Login</h1>
      <button onClick={login}>Login</button>
    </div>
  )
}

export default LoginPage

和仪表板/配置文件页面：

import { NextPage } from 'next'
import { useRouter } from 'next/router'

const DashboardPage: NextPage<{}> = () => {
  const router = useRouter()

  const logout = () => {
    router.push('/login')
  }

  return (
    <div>
      <h1>DashboardPage</h1>
      <button onClick={logout}>Logout</button>
    </div>
  )
}

export default DashboardPage

这是 Vercel 中显示的站点：https://nextjs-router-clientside-test.vercel.app/ https://nextjs-router-clientside-test.vercel.app/

这是完整的代码：https://github.com/LautaroRiveiro/nextjs-router-clientside-test https://github.com/LautaroRiveiro/nextjs-router-clientside-test

这是默认的预期行为，如此处所述GH 问题#30938 https://github.com/vercel/next.js/issues/30938#issuecomment-970239412.

这是预期的，因为我们正在缓存 HEAD 请求以尽可能减少请求量，但这仍然可能存在问题（#30901 https://github.com/vercel/next.js/issues/30901).

但是，您可以停止缓存 HEAD 请求并通过设置x-middleware-cache标题带有一个no-cache值（参见相关公关#32767 https://github.com/vercel/next.js/pull/32767) 在中间件中重定向之前。

export function middleware(request: NextRequest) {
    if (request.nextUrl.pathname === '/') {
        const redirectUrl = Math.random() > 0.5 ? '/dashboard' : '/profile'
        const response = NextResponse.redirect(new URL(redirectUrl, request.url))
        response.headers.set('x-middleware-cache', 'no-cache') // Disables middleware caching
        return response;
    }
}