next/script support script type="module"

[jboyesreach]

Goals

Support loading script tags via next/script, which require the type="module" attrib

Non-Goals

break existing next/script features

Background

The problem with next/script for these scripts is in the auto-preload functionality. Nextjs adds a <link rel="preload... tag, this preloads the script, then when the <script> tag in body also requests the script, the request is not a cache-hit resulting in the whole script being downloaded twice. It's a cache miss because script with type=module secretly has crossorigin="omit" https://web.dev/articles/modulepreload#why_doesnt_link_relpreload_work_for_modules

Current alternatives:

• import() the script instead - prevents the use of dynamic expression as script URL
• vanilla <script> tag - loses dedupe and strategy features of next/script

Proposal

next/script knows about the type="module" attrib. He can use that to switch from ReactDOM.preload() to ReactDOM.preloadModule()

[gianpaj]

Does Next.js / Turbo do this as well?

In the next version of Bun

bun build --splitting injects <link rel="modulepreload">, helping webpages load faster by reducing network waterfalls

see animation in https://x.com/bunjavascript/status/2095064473736556712