Ability to Handle a Prefetch in Middleware

[njfdev]

Describe the feature you'd like to request

I would like to have some sort of way to detect if a middleware file is being called by a prefetch. Due to Next.js Links prefetching the content of the webpage when the link loads, it causes the middleware to run at undesirable times. I would like a variable to know if the request is prefetched, so I can have custom logic to prevent my code running on prefetch.

Describe the solution you'd like

I am working on a custom analytics solution to fit my needs with Next.js. I am currently using a middleware file to get analytics on every page, but because Next.js prefetches any links on the page, I have extra page views in my analytics. I would like to have a way to only trigger middleware on the actual viewing of the page.

Describe alternatives you've considered

I have considered disabling prefetching on all of my links, but I would lose performance and the page would still prefetch on hover. I have also considered using the built-in <a> tag, but I would again lose performance and my page transitions.

[njfdev]

It has been about a week since I created this. I have since started using an open source solution for analytics that is entirely client side. This problem is solved for me now, but server side analytics using middleware might help if the user has client side javascript disabled. It may also help keep the javascript size down and improve performance.

[sainisagar310]

I caught up with a similar situation, where I want a code block not to be executed for prefetch calls.

Basically, I am implementing A/B experiment through GrowthBook in the middleware which means 50% of the users will be seeing a page "A" and another 50% of users will be seeing page "B".

So I want the A/B experiment logic to be executed for the users who are really visiting the page, not for those who are just hovering over the links. Otherwise, the metrics for experiments would be messed up.

I tried using A/B experiments on the client-side but it impacts the CLS (Cumulative Layout Shift) and user experience.

[dw2]

I ran into a similar issue. For me the fix was to check the purpose request header, and end my middleware process early:

const purpose = req.headers.get('purpose');
if (purpose && purpose.match(/prefetch/i)) return res;

[milovangudelj]

Using Next v13.4.5 the purpose header is always null

[maral]

What about this SO answer?
https://stackoverflow.com/a/76313026/4458769

For those looking for an answer for NextJS 13, I found this header to be useful to detect prefetch requests from Next Router:
Next-Router-Prefetch: 1

[DDTORRES055]

It's the same, it's always null in the middleware using v13.4.12

[louisthomaspro]

Is it possible de avoid prefetch to trigger middleware ?
I have a high number of users, I want the prefetch to preload the loading.tsx but I don't want it to trigger middleware as it costs a lot for me.
The middleware should be triggered only when the user visit the link.

[milovangudelj]

No, I believe it would defeat the purpose of a prefetch... If the prefetched content is going to change when you visit the link anyways (cause it goes through middleware and who knows what happens there) then you wasted resources in that request and you could have just loaded the page once without prefetching incorrect/old data.

To add to the discussion, I believe I found the only somewhat reliable way to detect a page visit from the middleware and it involves listening to requests made to your favicon cause they happen on every page visit and it never gets prefetched.

[jvandenaardweg]

Well, that's a big implication on usage $ on platforms like Vercel, where each invoke of the Middleware adds to your usage 🤯

So let's say you have 20 links on a page. They all get prefetched on each visit when in your viewport. So that's a 20x increase in Middleware usage compared to the Page Router.

Just came here to find ways around this. I guess the only way is to ditch the Middleware when using the App Router.

I also noticed the prefetching happens with a ?_rsc= query parameters, but that's not detectable in the matchers and request parameters. Also the headers like Next-Router-Prefetch are not available, even though it's in the request.

[louisthomaspro]

Unfortunatly I am stuck with the middleware as I have authentication and internationalization. Exacts, it increase really quickly, I have an infinite scroll with many cards, and each cards open a dialog using intercepting routes. If I remove prefetch on the link, I am having a bad UX, it's really slow.

[jvandenaardweg]

I guess for both there’s a way around that. There was a world before NextJS middleware’s. But it’s a hassle i’m looking to avoid.

[jvandenaardweg]

Ok, I i've found a solution for this. It seems the CSP docs hold a clue:
https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy

We recommend ignoring matching prefetches (from next/link) and static assets that don't need the CSP header.

Use the missing array in the Middleware config to only run the Middleware when the given headers are missing. Example:

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    {
      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    },
  ],
}

When added, I don't see logs in Vercel anymore of prefetches that go through the src/middleware Function. Win! 🎉

[MisterJimson]

This solution doesn't seem to work for me on 14.1.4. I have it copied the same and the middleware still runs. I don't see the headers being sent.

Super annoying that Next strips out the _rsc query param as well.

[cpotey]

Also experiencing the same issue as @peperoli - bit of an annoyance. Surprised there's no headers/anything to be able to discern that the request is a prefetch within the middleware

[sylvesteraswin]

Having the same issue, is there any other way to know if a request is a prefetch?

[GXM245]

@leerob Unfortunately, this is not a solution for us - both user clicks and Next JS pre-fetches are being appended with "?_rsc" param for us in the network GET requests and "Next-Router-Prefetch: 1" is not consistently present or persistent in Next-initiated pre-fetches as user navigates the site. Simply open up the network tab on any server-heavy project you have and you'll be able to follow the issue quite well.

This makes it impossible to integrate our logger setup accurately, we instead get a bunch of pathnames when we are expecting one.

Is this something that has been looked at in the latest Next 15 (RC)? Or are we any closer to a solution?

Conscious that there is a push to use the server more and more, which we agree with and have implemented. But not being able to differentiate between Next's pre-fetches and user-initiated navigation is a major underlying issue with the current architecture.

I think tightening the distinction to know when Next is the initiator might be a viable solution?

[dimitrisnl]

Seems like this stopped working in v14 and is still broken in v15, while the documentation says it's supported.

[vishalgupta023]

By examining the presence or absence of the next-url header:

Prefetching requests will have a next-url header pointing to the pathname of the current page.
Link click requests will have next-url set to null.
This is a reliable way to distinguish between the two types of navigation actions in your Next.js application.

example:
export async function middleware(req) {
// Get the headers from the request
const headers = req.headers;

// Extract the 'next-url' header
const nextUrlHeader = headers['next-url'] || headers.get('next-url');

// Log the next-url value to the terminal
console.log('Next-URL Header:', nextUrlHeader);

// Proceed with middleware
return NextResponse.next();

}

[peperoli]

That's a useful find, I'm testing this and it's looking good.

export async function middleware(request) {
  const nextUrlHeader = request.headers.get('next-url')
  const isPrefetch = nextUrlHeader !== null

  if (!isPrefetch) {
    // e.g. send hit to api.pirsch.io
  }

  return NextResponse.next()
}

[Mohamed3on]

FWIW this does not work with router.push which is also detected as a prefetch in this case.

[blazorin]

This is an issue in how NextJS handles the order of Request headers:

You can retrieve the headers such as sec-fetch-mode , but when it comes to the only header that is relevant to a prefetch, next-router-prefetch is empty, however you can see it in the Network tab, because it's set by NextJS set at some point of the request, after middleware.

The fix to this problem is setting these headers before the custom middleware function is run.

Can this be prioritised? I see many people running on same trouble.

[bmiit145]

we got it by

const isPrefetch =
req.headers.get('sec-fetch-mode') === 'cors' &&
req.headers.get('sec-fetch-dest') === 'empty' &&
req.headers.get('next-url') !== null;

[EL-MEHDI-ESSAADI-ON]

Not working on Next js 15.5