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.
Preloading in purely static sites causes duplicate requests (increasing payload) and produces an error in light house
See original GitHub issueBug report
Describe the bug
Preloading in purely static sites causes duplicate requests (increasing payload) and produces an error in light house. This happens when using the Link component (importing from “next/link”). If I create navigation links with the standard <a href="...">..</a> it bypasses this error but also stops preloading.
To Reproduce
Create “Navigation” component with Link tags and add it to page after <Head> component.
sample Link tag in navigation.js component:
import Link from "next/link";
...
<Link href="/">
<a>Home</a>
</Link>
...
index.js:
...
<Navigation />
....
Using light house report or page speed insights reveals payload error and also shows that the HTTP requests are being duplicated therefore the network payload is double what it should be.
A preload <link> was found for "......_next/static/chunks/.......js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
Expected behavior
No payload error and no duplication of requests (no unnecessary duplication of network payload)
System information
- OS: macOS
- Browser: chrome
- Version of Next.js: Next.js v9.5.2
- Version of Node.js: v12.18.3
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Hello. Apologies for the delay, just getting a bit of time to look into this again.
I tested again on my main project and it seems the issue persists (please correct me if I’m misinterpreting this).
Screenshot below from lighthouse report indicated that certain network requests are duplicated which is impacting the overall performance score of the site.
Reiterating that when I use the standard
<a href="">rather than the<Link href="">, this issue disappears.Running a lighthouse report on this reproduction site shows the same issue (albeit smaller file sizes but you can still see the duplication): https://prefetch-repro.laccuna.vercel.app/
Thank you for looking into this!
Best, Nour Elba
Hi @Timer I have been watching this issue as we’ve seen something similar in our application. I’ve pulled down the reproduction provided by @laccuna. I’ve attached a screenshot that shows the same file being pulled twice (_next/static/chunks/484c840239a025432effd6ecc373d498fa764368.2a0774ba056ee0c29101.js). I have ensured that my disable cache option is not on.
I can see that the initiator for the first request is ‘index’ and the subsequent request is ‘main’.
After this I edited the example and set all Link components to use ‘prefetch: false’. After applying this setting the files are no longer duplicated.