Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next.js 12 Middlewares trigger too many HEAD requests

See original GitHub issue

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

15.5.1

What browser are you using?

Edge 95.0.1020.30

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

Whenever a middleware runs it triggers lots of HEAD request. This is specially bad when you have tons of Next links, since for each Next Link in the screen it prefetches the JS bundle for it and does one HEAD request per link.

I ran into an issue with this because of Cloudflare rate-limiting.

This doesn’t seem like optimal behaviour.

2021-11-03 18 29 43

Expected Behavior

Not to send these HEADS requets for Next Link prefetch requests, or at least have some way of disabling it.

To Reproduce

I’ve put together a minimal reproduction repository. It’s the same repo used in the example gif.

https://github.com/emwp/nextjs-head-requests-example Just clone it, install dependencies and run yarn prod.

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

javivelascocommented, Nov 16, 2021

This is expected to happen.

With the introduction of Middleware the client can’t know without checking with the server where a certain link is resolving to. For example, if you have a global middleware that rewrites /about with about2 when there is a certain cookie (like in an A/B Test), there will be cases where we need to pre-load about and others where it should be about2, it will depend on the request.

Because the middleware runs in the server we must run a “preflight” request to see what we need to prefetch. There is no other way around this request that doesn’t involve running the middleware. To avoid having so many requests on the first load you can disable prefetch in the Link component but it will still trigger on hover and of course block navigation.

I don’t see a way to prevent those requests if you require to have a global middleware while keeping client navigation. The max we can delay this request is to the moment where the navigation happens but that could add latency on navigation which would feel sloppy.

0reactions

balazsorban44commented, Jan 27, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Top Results From Across the Web

Advanced Features: Middleware - Next.js

Middleware allows you to run code before a request is completed, then based on the incoming request, you can modify the response by...

Middleware gets hit way too many times while next.js is ...

if I use a middleware (server.use(req, res, next)) it gets hit dozen times while the page is compiling, which makes my app crash...

Implementing user authorization in Next.js - LogRocket Blog

Let's explore how to use the NextAuth.js library to implement user authorization (OAuth2.0) in Next.js applications.

5.x API - Express.js

Returns middleware that only parses JSON and only looks at requests where the ... cause this middleware to simply call next() to invoke...

The Next.js Handbook - The Valley of Code

Using the router to detect the active link; 10. Using next/router; 11. Feed data to the components using getInitialProps(); 12. CSS; 13. Populating...