diff --git a/docs/api-reference/next/script.md b/docs/api-reference/next/script.md
index c1470361fcc1f5f..e6bed4fa6389ab6 100644
--- a/docs/api-reference/next/script.md
+++ b/docs/api-reference/next/script.md
@@ -20,6 +20,7 @@ description: Optimize loading of third-party scripts with the built-in Script co
| Version | Changes |
| --------- | ------------------------- |
+| `v12.2.4` | `onReady` prop added. |
| `v11.0.0` | `next/script` introduced. |
@@ -47,9 +48,9 @@ The loading strategy of the script.
### onLoad
-A method that returns additional JavaScript that should be executed after the script has finished loading.
+A method that returns additional JavaScript that should be executed once after the script has finished loading.
-> **Note: `onLoad` can't be used with the `beforeInteractive` loading strategy.**
+> **Note: `onLoad` can't be used with the `beforeInteractive` loading strategy. Consider using `onReady` instead.**
The following is an example of how to use the `onLoad` property:
@@ -74,6 +75,34 @@ export default function Home() {
}
```
+### onReady
+
+A method that returns additional JavaScript that should be executed after the script has finished loading and every time the component is mounted.
+
+The following is an example of how to use the `onReady` property:
+
+```jsx
+import { useState } from 'react'
+import Script from 'next/script'
+
+export default function Home() {
+ return (
+ <>
+
+
+ )
+}
+
+export default Page
diff --git a/test/integration/script-loader/base/pages/page9.js b/test/integration/script-loader/base/pages/page9.js
new file mode 100644
index 000000000000000..6e82d8627683c8a
--- /dev/null
+++ b/test/integration/script-loader/base/pages/page9.js
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+const Page = () => {
+ return (
+ <>
+ Page 8
+ >
+ )
+}
+
+export default Page
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index 0a5ca5d50440c82..cad3fc6bede1552 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -190,6 +190,30 @@ describe('Next.js Script - Primary Strategies', () => {
}
})
+ it('onReady fires after load event and then on every subsequent re-mount', async () => {
+ let browser
+ try {
+ browser = await webdriver(appPort, '/page8')
+
+ const text = await browser.elementById('text').text()
+
+ expect(text).toBe('aaa')
+
+ // Navigate to different page and back
+ await browser.waitForElementByCss('[href="/page9"]')
+ await browser.click('[href="/page9"]')
+ await browser.waitForElementByCss('[href="/page8"]')
+ await browser.click('[href="/page8"]')
+
+ await browser.waitForElementByCss('.container')
+ const sameText = await browser.elementById('text').text()
+
+ expect(sameText).toBe('aaa') // onReady should fire again
+ } finally {
+ if (browser) await browser.close()
+ }
+ })
+
it('priority beforeInteractive with inline script', async () => {
const html = await renderViaHTTP(appPort, '/page5')
const $ = cheerio.load(html)