Link to the code that reproduces this issue

https://github.com/LowScarlet/portfolio-api/tree/main/frontend/website

To Reproduce

1. create middleware.ts
2. add some code like

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// Main
export default async function mainMiddleware(request: NextRequest) {
  console.log("Running!")

  return NextResponse.next();
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

3. Add two regular page like
   Home1/page.tsx

'use client'

import Link from "next/link";

export default function Home() {
  return (
    <main>
      <Link href={'/home2'}>Next Page</Link>
    </main>
  );
}

Home2/page.tsx

'use client'

import Link from "next/link";

export default function Home2() {
  return (
    <main>
      <Link href={'/home'}>Pre Page</Link>
    </main>
  );
}

Recording_2024-05-19_185352.mp4

20240519-1700-45.9373681.mp4

Current vs. Expected behavior

The middleware should still run every time the page changes

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 12072
  Available CPU cores: 4
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Middleware

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Its work if we use random query, you can check the last video (So the point is middleware has been cached)

Btw, it can be a pain with Auth. Using the next/prev btns can lead to still display a cached protected page after logout.

Hi -- the behavior you're observing relates to the client router cache.

If you'd like to disable the client router cache so that every request hits the server, you can disable it by modifying your next.config.js as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
}

module.exports = nextConfig

You can learn more about this configuration option here.

Member

thats cool, i will try it

Hi -- the behavior you're observing relates to the client router cache.

If you'd like to disable the client router cache so that every request hits the server, you can disable it by modifying your next.config.js as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
}

module.exports = nextConfig

You can learn more about this configuration option here.

Already saw this, but it didn't resolve all my issues related to this "Lazy" middleware behavior. :/
Also, I tried to invalidate the client router cache, using a router.refresh call, which still didn't seem to fix my issue.

Maybe I will open an issue for that. /shrug