Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing prefetch headers in Middleware #63728

Open
lucasmotta opened this issue Mar 26, 2024 · 5 comments
Open

Missing prefetch headers in Middleware #63728

lucasmotta opened this issue Mar 26, 2024 · 5 comments
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Runtime Related to Node.js or Edge Runtime with Next.js.

Comments

@lucasmotta
Copy link

lucasmotta commented Mar 26, 2024

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/nextjs-missing-prefetch-header-5ll75f?file=%2Fapp%2Flayout.tsx%3A38%2C17

To Reproduce

  1. Build the application for production
    CleanShot 2024-03-26 at 13 08 19@2x
  2. Run production server
    CleanShot 2024-03-26 at 13 08 54@2x
  3. Inspect the terminal logs when the server starts
    image

You will notice that as soon as you load the / page, the middleware logs the pages the current page and also the pages being prefetched, and that later should not happen.

Current vs. Expected behavior

The current documentation suggests that if you don't want the middleware to run for pages that are being prefetched, you can target the next-router-prefetch and purpose headers:

export const config = {
  matcher: [
    {
      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    },
  ],
};

Unfortunately that does not seem to work in the latest version of Next.js - those headers are never present, therefore "missing" - so the middleware is running for pages that are being prefetched, which causes issues if you are handling redirects/rewrites, etc...

In my example app, I've a couple Link components in the root layout with a prefetch prop. Those links are being prefetched, but they are also running in the middleware (see the logs) and no prefetch headers are added to those prefetched pages.

I would expect those headers to be available in the middleware for pages that are being prefetched or at least another way for the middleware to know when a page is being prefetched or not.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.4
Relevant Packages:
  next: 14.1.4
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
Next.js Config:
  output: N/A

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

App Router, Middleware / Edge (API routes, runtime)

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

next build (local), next start (local), Vercel (Deployed)

Additional context

I also tested with version 13.5.6 and the issue remains.

I also remove the missing property and added logs to those headers, but they always return as null no matter what.

@lucasmotta lucasmotta added the bug Issue was opened via the bug report template. label Mar 26, 2024
@github-actions github-actions bot added the Runtime Related to Node.js or Edge Runtime with Next.js. label Mar 26, 2024
@lucasmotta
Copy link
Author

Upon some further investigation, it looks like the headers are present when using the pages/ directory. I forked my example and switched to pages/ directory and now the middleware correctly filters out prefetched pages from the middleware.
https://codesandbox.io/p/devbox/nextjs-missing-prefetch-header-pages-5ckpjs

And this can be confirmed by inspecting the Network request:
CleanShot 2024-03-26 at 14 40 28@2x

So is it safe to assume that this discrepancy between pages/ and app/ router is a bug? Or is that intentional?

@akshit-mdr
Copy link

It is a major blocker for my project as well, can we fix this for app/ router

@juliansommer
Copy link

juliansommer commented Jun 12, 2024

need this

@github-actions github-actions bot added the linear: next Confirmed issue that is tracked by the Next.js team. label Jun 24, 2024
@lmac-1
Copy link

lmac-1 commented Jun 27, 2024

missing: [
    { type: 'header', key: 'next-router-prefetch' },
    { type: 'header', key: 'purpose', value: 'prefetch' },
  ],

is also not working as expected in middleware.ts in our application using v14.0.3 of Next.js.

This is a big problem for us and we are due to go live soon. We don't want to be running our middleware for every link that is prefetched. We are worried that this could run up the quotas for Edge Middleware functions on Vercel if we receive a lot of traffic.

@mohamedBENKHOUYA
Copy link

I encountered the same issue. After some debugging, I discovered that the headers are missing when using <Link prefetch={true} /> where prefetch is explicitly set to true. However, when it's left as the default (undefined), the headers are present in the prefetch request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Runtime Related to Node.js or Edge Runtime with Next.js.
Projects
None yet
Development

No branches or pull requests

5 participants