How to disable middleware for all prefetches?
Unanswered
Joho posted this in #help-forum
JohoOP
Whats my problem?
I am using middleware to send information about a client request (a page visit) to an analytics tool (in this case Tinybird).
Whenever a user visits a page which includes the
On every prefetch the middleware is called. This is not what I wantâ—
User Story
As a NextJS developer utilizing middleware I would like to be able to differentiate app-prefetches from actual user-initiated requests so that I don't need to deal with unnecessary middleware calls.
The following properties seem deprecated:
- purpose: prefetch
- x-middleware-prefetch: 1
- x-nextjs-data: 1
=> What other options do I haveâ“
What have I tried?
I tried finding some specific user-agent or header properties in the req object to at least return the middleware early and not call any further service. However without success.
I am using middleware to send information about a client request (a page visit) to an analytics tool (in this case Tinybird).
Whenever a user visits a page which includes the
<Link> component to link to other pages of the same website those routes get *prefetched. *On every prefetch the middleware is called. This is not what I wantâ—
User Story
As a NextJS developer utilizing middleware I would like to be able to differentiate app-prefetches from actual user-initiated requests so that I don't need to deal with unnecessary middleware calls.
The following properties seem deprecated:
- purpose: prefetch
- x-middleware-prefetch: 1
- x-nextjs-data: 1
=> What other options do I haveâ“
What have I tried?
I tried finding some specific user-agent or header properties in the req object to at least return the middleware early and not call any further service. However without success.
2 Replies
Create a new component that wraps <Link prefetch={ false } />
Brown bear
@Joho see my PR. There's a config option for that, but it was hidden/missing in the docs: https://github.com/vercel/next.js/pull/56799