ISR shows stale data when opening via <Link> to a Middleware-rewritten route

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
Binaries:
  Node: 18.4.0
  npm: 8.12.1
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.2.6-canary.0
  eslint-config-next: 12.2.5
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

When opening a page:

• located under a dynamic route, say pages/posts/[id],
• with said route being subject to a Middleware rewrite, say /1 → /posts/1,
• using a <Link>, i.e. <Link href="/1">...</Link>,

a stale version is served. In fact, it never shows the revalidated page. A page refresh shows the correct version, but opening it again with the Link brings back the outdated version.

Expected Behavior

When opened with the Link, the ISR-revalidated page should be served.

Link to reproduction

https://github.com/motifland/isr-cache-bug

To Reproduce

• Create a page with a dynamic route, say pages/posts/[id].ts.
• Use a Middleware rewrite from /1 to /posts/1:

// middleware.ts
import { NextRequest, NextResponse } from 'next/server'

export default async function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl

  if (pathname === '/1') {
    const url = req.nextUrl.clone()
    url.pathname = '/posts/1'
    return NextResponse.rewrite(url)
  }

  return NextResponse.next()
}

• In the page, use ISR (here, 10 seconds), and create a <Link> and an <a> pointing to itself:

import { GetStaticPaths } from 'next'
import Link from 'next/link'

const Slug = ({ timestamp }: { timestamp: number }) => {
  return (
    <div>
      <Link href="/1"><a>Link to self</a></Link>
      <a href="/1">a to self</a>
      <p>Refreshed {Math.round((Date.now() - timestamp) / 1000)}s ago</p>
    </div>
  )
}

export async function getStaticProps() {
  return {
    props: { timestamp: Date.now() },
    revalidate: 10,
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  return { paths: [], fallback: true }
}

export default Slug

• Deploy to Vercel.
• Visit the page, and wait for >10s for ISR to run revalidation on the path.
• Click on the <a> and observe that the counter is properly reset, reflecting the ISR-revalidated path.
• Click on the <Link> and observe that the counter is never reset, despite ISR revalidation.

Note: the bug does not occur on local build.

Live demo: https://isr-cache-bug.vercel.app/1

https://user-images.githubusercontent.com/504893/184553724-82c4c5a2-7364-4be4-9d9d-03f6050a64ca.mp4

[ijjk]

A fix for this has landed, will update this thread when it has been fully rolled to production

[ijjk]

Hi, thanks for the detailed reproduction, we’re investigating this now and will update here when patched!