Fix #11107 - don't prefetch preloaded modules #1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR proposes a fix for vercel#11107 (JS modules are loaded twice). A more detailed explanation of the investigation that led to this PR can be found in the issue's comments (vercel#11107 (comment)).
Replicability
In my own project using
"next": "^10.0.1"
the issue is reproduced.In the issue's comments, a developer reported a replication using
"^10.0.7"
.The issue is reproduced on https://nextjs.org/ by looking at the network tab, filtering by
.js
files and looking for pairs of identical calls with one originating from initial HTML (preload
) and another one from a script (addingprefetch
link to DOM).Some information about the fix
Both
preload
andprefetch
values for<link rel="x">
behave similarly, with the difference being in network priority level (preload is high priority, prefetch is low priority).Next.js uses
<link rel="preload">
in its initial HTML but then only uses<link rel="prefetch">
for the rest of the lifetime of the page.However, when Next.js detects that a script should be requested in advance, it only checks for matching
<link rel="prefetch">
and not<link rel="preload">
(which have higher priority and are present earlier in the DOM, thus have a greater likelihood of being already loaded).This PR aims to fix that oversight.
Potential issues (none AFAIK)
As far as I can tell by looking through the codebase, there is no downside not to add a
prefetch
when apreload
is already in the DOM. No other script looks for a<link>
based on itsrel
attribute.