CODEWITHSUNDEEP
javascriptnext.js
Lautaro Riveiro
Lautaro Riveiro

Reputation: 43

How to prevent router.push() from caching the route to which it was redirected in Next.js middleware?

I'm having a problem I think with client-side navigation through the router and the use of middleware. Somehow the router is remembering the first time it was redirected and the following times it navigates directly to that route without going through the middleware.

This stops happening when I refresh the browser. It also doesn't happen if I run in a development environment.

I would like to force the router to enter the middleware each time to re-evaluate where to redirect.

To reproduce:

  1. Go to / from the browser search bar repeatedly. You have a 50% chance of being redirected to /dashboard and 50% to /profile because of middleware.ts
  2. Go to /login and click on Login button. This will make a router.push('/') and be redirected to either /dashboard or /profile.
  3. Click on Logout button. This will make a router.push('/login').
  4. The next times Login will always redirect to the same route.

This is my 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))
    }
  }
}

My 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 LoginPage

And Dashboard/Profile Page:

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

This is the site displayed in Vercel: https://nextjs-router-clientside-test.vercel.app/

And this is the full code: https://github.com/LautaroRiveiro/nextjs-router-clientside-test

Upvotes: 4

Views: 6615

Answers (1)

juliomalves
juliomalves

Reputation: 50338

This is the default, expected behaviour as described in this GH issue #30938.

This is expected since we are caching HEAD requests to reduce the amount of requests as much as possible which can still be problematic (#30901).

However, you can stop caching HEAD requests and force their revalidation on client-side navigation by setting the x-middleware-cache header with a no-cache value (see related PR #32767) before redirecting in the 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;
    }
}

Upvotes: 3

Related Questions