Creo que tengo un problema con la navegación del lado del cliente a través del enrutador y el uso de middleware. De alguna manera, el enrutador recuerda la primera vez que fue redirigido y las siguientes veces navega directamente a esa ruta sin pasar por el middleware.
Esto deja de suceder cuando actualizo el navegador. Tampoco sucede si ejecuto en un entorno de desarrollo.
Me gustaría obligar al enrutador a ingresar al middleware cada vez para volver a evaluar a dónde redirigir.
Reproducir:
/ desde la barra de búsqueda del navegador repetidamente. Tiene un 50 % de posibilidades de ser redirigido a /dashboard y un 50 % a /profile debido a middleware.ts/login y haga clic en el botón Iniciar sesión. Esto creará un router.push('/') y será redirigido a /dashboard o /profile .router.push('/login') .Este es mi middleware.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)) } } }Mi login.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 LoginPageY panel de control/página de perfil:
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 DashboardPageEste es el sitio que se muestra en Vercel: https://nextjs-router-clientside-test.vercel.app/
Y este es el código completo:https://github.com/LautaroRiveiro/nextjs-router-clientside-test
Este es el comportamiento esperado predeterminado, como se describe en este número 30938 de GH .
Esto es de esperar ya que estamos almacenando en caché las solicitudes HEAD para reducir la cantidad de solicitudes tanto como sea posible, lo que aún puede ser problemático ( #30901 ).
Sin embargo, puede dejar de almacenar en caché las solicitudes HEAD y forzar su revalidación en la navegación del lado del cliente configurando el encabezado x-middleware-cache con un valor no-cache (consulte PR #32767 relacionado) antes de redirigir en el middleware.
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; } }