Next 13: setting headers in middleware causes full page reload between navigations

[colinclerk]

Verify canary release

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

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
    Binaries:
      Node: 16.13.1
      npm: 8.19.1
      Yarn: 1.22.17
      pnpm: 7.12.0
    Relevant packages:
      next: 13.0.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Version 105.0.5195.125 (Official Build) (x86_64)

Describe the Bug

#41380 introduced a way to override headers from middleware.

Using this functionality causes next/link to trigger full-page reload between navigations.

This is only an issue for next dev. There is no bug when it's deployed on Vercel.

Expected Behavior

There should not be a full-page reload when next/link is used.

Link to reproduction

https://github.com/colinclerk/appdir-middleware-bug

To Reproduce

Clone the repo and start the dev server, then click the links between "Index" and "Page 2" - you should see full-page reloads

If helpful, here's the deployed version that doesn't exhibit the issue: https://appdir-middleware-bug.vercel.app/

[mihirsam]

Same happening to me. Following.

[antonybudianto]

It seems that the RSC Header is missing when overriding the middleware (update: my issue already solved )

[focux]

I'm experiencing the same problem. Have anyone found a workaround until this gets fixed?

[rocketana]

Same problem here, it makes my app behave extra slow with full page refreshes after I add headers in the middleware. Still not solved in [email protected]. Following.

The problem's "solved" using NextResponse.rewrite instead of NextResponse.next. It allows me to set the response headers without slowing my app.

[alecla]

I have the same issue. Even with NextResponse.rewrite it will always do a full page reload.

[khuezy]

I have the same problem but the inverse. next dev works fine but once I deploy to AWS, then it reloads on <Link> navigation. Edit: user error. The cloudfront caching policy need to pass the rsc headers to get the router navigation to be in place, instead of full refresh. @alecla might be useful if you're deploying to CDN.