Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

next/script onLoad run once per cache Key (id, src)

See original GitHub issue

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

codesandbox

Describe the Bug

When using more than one Script with same id or src, only first script that complete load trigger the onLoad prop. Same problem happens using one Script but after unmount and remount, for example when navigating throughout client-side router the onLoad will not be called. @giorgiabosello

Expected Behavior

Script component should load once the src script but run onLoad on component did mount and script is loaded.

To Reproduce

https://codesandbox.io/s/nextjs-script-onload-ltm95

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:16 (2 by maintainers)

Top GitHub Comments

3reactions

housseindjirdehcommented, Jul 20, 2022

Thanks for brainstorming with me folks, I appreciate it 😃

PR https://github.com/vercel/next.js/pull/38849 should solve for this by introducing onReady as a prop. Please feel free to leave any comments directly in the PR if you think anything should be changed, but it’s set up to run after load for when the script first loads and then again with every component re-mount.

3reactions

housseindjirdehcommented, Feb 15, 2022

This is indeed an issue, so thanks all for flagging this.

The hook is a workaround for now, but I’ll either approve @bordeo’s PR (#30966) to remove the current caching functionality or investigate a way to improve it so that it doesn’t ignore onLoad for repeat scripts.

Top Results From Across the Web

Basic Features: Handling Scripts - Next.js

Event handlers can be used with the Script component to execute additional code after a certain event occurs: onLoad : Execute code after...

Optimizing third-party script loading in Next.js

This article discusses the Next.js Script component and demonstrates how it can be used for better sequencing of third-party scripts.

Best practices to increase the speed for Next.js apps

Next.js has built-in caching so pages load faster. ... By setting the value of the strategy prop in the next/script component, ...

How to load external scripts dynamically in Angular?

You can use following technique to dynamically load JS scripts and libraries on demand in your Angular project. script.store.ts will contain the path...

Optimize loading third-parties - Patterns.dev

For example, you may want to execute specific analytics scripts early without missing any early page-load data. <script src="https://example.com/deferthis.js" ...