Next.js: Preloading in purely static sites causes duplicate requests (increasing payload) and produces an error in light house

[laccuna]

Bug 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 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 thecrossoriginattribute 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

[timneutkens]

Please add a complete reproduction repository.

[laccuna]

Created this to reproduce the issue:

https://github.com/laccuna/prefetch-repro

Deployed and tested again:

#

[Timer]

I could not reproduce this bug on Chrome or Lighthouse when running it under normal conditions.

The only way I could get this to reproduce is by intentionally disabling the cache:

You probably have this option enabled!

If you notice, these requests are not actually duplicated because they come from different origins. If you re-enable your cache in browser dev tools, you'll see this properly retrieved from memory.

[JimmyGray]

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.

[laccuna]

Thanks for adding to this @JimmyGray.

I don’t see how enabling cache would help a first-time visitor to the site (and that certainly doesn’t affect the network payload being doubled as analyzed by lighthouse). Maybe I’m just misunderstanding but I believe this issue persists...

Thanks.

[Timer]

@JimmyGray your screenshot shows them coming from disk cache or prefetch cache. This means the request was not duplicated. This is working completely as intended, and the resources are not duplicated in Lighthouse.

Like I said above, I could not reproduce Lighthouse claiming there are duplicated network requests. Can you link me to some results?

[JimmyGray]

Hi @Timer thank you for investigating that. I did notice that they were coming from the disk / prefetch cache. I was wondering if you could explain that behaviour in a bit more detail as to why the resource is fetched a few times. Is it to do with how webpack chunking works?

[laccuna]

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