e6862e4061
Fixes #39993. Before the PR: - `next/script` component mount, `useEffect` for `onReady` executes - The script's cacheKey is not added to `LoadCache`, skip `onReady` - The second `useEffect` for `loadScript` executes - The script's cacheKey is added to `LoadCache` even if it might not fully load yet - Because of React's strict mode, `useEffect` for `onReady` executes again - Since the script's cacheKey is in `LoadCache`, `onReady` is called (even when the script is not loaded yet) - After the script is actually loaded, inside the `script.onload` event handler the `onReady` is called again After the PR: - `next/script` component mount, `useEffect` for `onReady` executes - The script's cacheKey is not added to `LoadCache`, `useEffect` skips `onReady` - The second `useEffect` for `loadScript` executes - The script's cacheKey is added to `LoadCache` only if it is an inline script - Because of React's strict mode, `useEffect` for `onReady` executes again - The script is not yet loaded, its cacheKey is not in `LoadCache`, `useEffect` skips `onReady` again - After the script is actually loaded, inside the `script.onload` event handler the `onReady` is finally called In short, the PR resolves a race condition that only occurs under React strict mode (and makes the `next/script` component more concurrent rendering resilient). ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` |
||
|---|---|---|
| .. | ||
| bin | ||
| build | ||
| bundles | ||
| cli | ||
| client | ||
| compiled | ||
| export | ||
| future | ||
| image-types | ||
| lib | ||
| pages | ||
| server | ||
| shared/lib | ||
| telemetry | ||
| trace | ||
| types | ||
| amp.d.ts | ||
| amp.js | ||
| app.d.ts | ||
| app.js | ||
| babel.d.ts | ||
| babel.js | ||
| client.d.ts | ||
| client.js | ||
| config.d.ts | ||
| config.js | ||
| constants.d.ts | ||
| constants.js | ||
| data.d.ts | ||
| data.js | ||
| data.sqlite | ||
| document.d.ts | ||
| document.js | ||
| dynamic.d.ts | ||
| dynamic.js | ||
| error.d.ts | ||
| error.js | ||
| head.d.ts | ||
| head.js | ||
| image.d.ts | ||
| image.js | ||
| index.d.ts | ||
| jest.d.ts | ||
| jest.js | ||
| license.md | ||
| link.d.ts | ||
| link.js | ||
| package.json | ||
| README.md | ||
| router.d.ts | ||
| router.js | ||
| script.d.ts | ||
| script.js | ||
| server.d.ts | ||
| server.js | ||
| taskfile-ncc.js | ||
| taskfile-swc.js | ||
| taskfile.js | ||
| tsconfig.json | ||
Next.js
Getting Started
Visit https://nextjs.org/learn to get started with Next.js.
Documentation
Visit https://nextjs.org/docs to view the full documentation.
Who is using Next.js?
Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.
Community
The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.
To chat with other community members you can join the Next.js Discord.
Our Code of Conduct applies to all Next.js community channels.
Contributing
Please see our contributing.md.
Good First Issues
We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Authors
- Tim Neutkens (@timneutkens)
- Naoyuki Kanezawa (@nkzawa)
- Guillermo Rauch (@rauchg)
- Arunoda Susiripala (@arunoda)
- Tony Kovanen (@tonykovanen)
- Dan Zajdband (@impronunciable)
Security
If you believe you have found a security vulnerability in Next.js, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com to disclose any security vulnerabilities.