next/script is run once

[michaltarasiuk]

Link to the code that reproduces this issue

https://github.com/michaltarasiuk/next-script-fragment-hash

To Reproduce

1. Start the application in development mode.
2. Go to page 1 (script indicator is green - script is executed)
3. Go back to home page
4. Revisit page 1 (script indicator is red - script is not executed)

Current vs. Expected behavior

Following the steps from the previous section, I expected that script will be executed each time I visit the page. Instead it is executed only once.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 21.4.0
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.12.1
Relevant Packages:
  next: 14.1.1-canary.63 // Latest available version is detected (14.1.1-canary.63).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Script optimization (next/script)

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

Related with:

• External scripts added with next/script load only once #30984

1. Script is fetched and loaded only once (current behavior)

When I first visited the page, the script executed successfully, and DOM elements were modified. The issue occured when moving from another page to the main one; the script failed to execute, leading to the page not functioning correctly.

I found that fragment of code.

const cacheKey = id || src;

// Script has already loaded
if (cacheKey && LoadCache.has(cacheKey)) {
  return;
}

// Contents of this script are already loading/loaded
if (ScriptCache.has(src)) {
  LoadCache.add(cacheKey);
  // It is possible that multiple `next/script` components all have same "src", but has different “onLoad”
  // This is to make sure the same remote script will only load once, but "onLoad" are executed in order
  ScriptCache.get(src).then(onLoad, onError);
  return;
}

Such caching is appropriate when the script assigns values/methods to the window object, allowing for later use by onReady.

2. Script is fetched once and executed every time (expected behavior)

URL fragment hash does not cause browser to refetch resource. Next.js thinks of that as the different URL so the script gets executed again, and everything works as expected.

import cryptoRandomString from "crypto-random-string";

function getScriptSrc() {
  const urlObject = new URL("script.js", "http://localhost:3000");
  urlObject.hash = cryptoRandomString({ length: 10, type: "url-safe" });
  return urlObject.toString();
}

This works, but it seems to not be the best solution.