next/script is not react strict mode resilient (not concurrent rendering safe)

[SukkaW]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Mon Aug 15 20:06:46 PDT 2022; root:xnu-8792.40.29.161.2~1/RELEASE_X86_64
    Binaries:
      Node: 16.16.0
      npm: 8.18.0
      Yarn: 1.22.18
      pnpm: 7.9.5
    Relevant packages:
      next: 12.2.6-canary.5
      eslint-config-next: 12.2.5
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The next/script is not React Strict Mode resilient. During development with reactStrictMode enabled, the script with beforeInteractive or worker could load more than once. The onLoad could be called more than once. The onReady used to be called more than once (see #39993), and I have fixed it in #40002.

And there are many other hidden race conditions.

By checking the source code of next/script, it is clear that a side effect (loadScript) may execute during the render phase (when if (strategy === 'beforeInteractive' || strategy === 'worker') {), which breaks the fundermental rule of React.

next.js/packages/next/client/script.tsx

Lines 194 to 213 in e6862e4

	if (strategy === 'beforeInteractive' || strategy === 'worker') {
	if (updateScripts) {
	scripts[strategy] = (scripts[strategy] || []).concat([
	{
	id,
	src,
	onLoad,
	onReady,
	onError,
	...restProps,
	},
	])
	updateScripts(scripts)
	} else if (getIsSsr && getIsSsr()) {
	// Script has already loaded during SSR
	LoadCache.add(id || src)
	} else if (getIsSsr && !getIsSsr()) {
	loadScript(props)
	}
	}

Expected Behavior

Whenever the strict mode is enabled or not, whenever the next/script is wrapped in <OffScreen /> or not, whatever the strategy is:

Remote scripts

• script should only be loaded once
• onLoad should only be called once, upon loaded
• onReady should be called when the script is first loaded, or when the next/script is re-mounted

Inline scripts

• onLoad should never be called
• onReady should be called whenever the next/script is mounted

Link to reproduction

46b8959 (#40002)

https://github.com/vercel/next.js/runs/8049268564?check_suite_focus=true

To Reproduce

• Clone the Next.js repo
• Add a next.config.js with reactStrictMode: true under test/integration/script-loader/base directory
• Find test/integration/script-loader/test/index.test.js, replace bootApp (which will test in production mode) with launchApp (which will test in dev mode)
• pnpm run testonly --test-path-pattern test/integration/script-loader/test/index.test.js
• Multiple existing test cases fail to pass

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.