diff --git a/errors/middleware-upgrade-guide.md b/errors/middleware-upgrade-guide.md
index 8c04cc6c4f3b..94af0bceeae5 100644
--- a/errors/middleware-upgrade-guide.md
+++ b/errors/middleware-upgrade-guide.md
@@ -388,4 +388,4 @@ Prior to Next.js `v12.2`, Middleware was not executed for `_next` requests.
 
 For cases where Middleware is used for authorization, you should migrate to use `rewrite`/`redirect` to Pages that show an authorization error, login forms, or to an API Route.
 
-See [No Reponse Body](#no-response-body) for an example of how to migrate to use `rewrite`/`redirect`.
+See [No Response Body](#no-response-body) for an example of how to migrate to use `rewrite`/`redirect`.
diff --git a/packages/next/README.md b/packages/next/README.md
index dd075a57575b..a85ea7acb225 100644
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://nextjs.org">
-    <img src="https://assets.vercel.com/image/upload/v1607554385/repositories/next-js/next-logo.png" height="128">
+    <img src="https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_light_background.png" height="128">
     <h1 align="center">Next.js</h1>
   </a>
 </p>
diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
index c1adef2378bd..e9ebd6a022c0 100644
--- a/packages/next/client/script.tsx
+++ b/packages/next/client/script.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from 'react'
+import React, { useEffect, useContext, useRef } from 'react'
 import { ScriptHTMLAttributes } from 'react'
 import { HeadManagerContext } from '../shared/lib/head-manager-context'
 import { DOMAttributeNames } from './head-manager'
@@ -57,21 +57,25 @@ const loadScript = (props: ScriptProps): void => {
     return
   }
 
+  /** Execute after the script first loaded */
+  const afterLoad = () => {
+    // Run onReady for the first time after load event
+    if (onReady) {
+      onReady()
+    }
+    // add cacheKey to LoadCache when load successfully
+    LoadCache.add(cacheKey)
+  }
+
   const el = document.createElement('script')
 
   const loadPromise = new Promise<void>((resolve, reject) => {
     el.addEventListener('load', function (e) {
-      // add cacheKey to LoadCache when load successfully
-      LoadCache.add(cacheKey)
-
       resolve()
       if (onLoad) {
         onLoad.call(this, e)
       }
-      // Run onReady for the first time after load event
-      if (onReady) {
-        onReady()
-      }
+      afterLoad()
     })
     el.addEventListener('error', function (e) {
       reject(e)
@@ -85,8 +89,7 @@ const loadScript = (props: ScriptProps): void => {
   if (dangerouslySetInnerHTML) {
     el.innerHTML = dangerouslySetInnerHTML.__html || ''
 
-    // add cacheKey to LoadCache for inline script
-    LoadCache.add(cacheKey)
+    afterLoad()
   } else if (children) {
     el.textContent =
       typeof children === 'string'
@@ -95,8 +98,7 @@ const loadScript = (props: ScriptProps): void => {
         ? children.join('')
         : ''
 
-    // add cacheKey to LoadCache for inline script
-    LoadCache.add(cacheKey)
+    afterLoad()
   } else if (src) {
     el.src = src
     // do not add cacheKey into LoadCache for remote script here
@@ -174,12 +176,42 @@ function Script(props: ScriptProps): JSX.Element | null {
   // Context is available only during SSR
   const { updateScripts, scripts, getIsSsr } = useContext(HeadManagerContext)
 
+  /**
+   * - First mount:
+   *   1. The useEffect for onReady executes
+   *   2. hasOnReadyEffectCalled.current is false, but the script hasn't loaded yet (not in LoadCache)
+   *      onReady is skipped, set hasOnReadyEffectCalled.current to true
+   *   3. The useEffect for loadScript executes
+   *      Once the script is loaded, the onReady will be called by then
+   *   [If strict mode is enabled / is wrapped in <OffScreen /> component]
+   *   5. The useEffect for onReady executes again
+   *   6. hasOnReadyEffectCalled.current is true, so entire effect is skipped
+   *   7. The useEffect for loadScript executes again
+   *   8. The script is already loaded/loading, loadScript bails out
+   *
+   * - Second mount:
+   *   1. The useEffect for onReady executes
+   *   2. hasOnReadyEffectCalled.current is false, but the script has already loaded (found in LoadCache)
+   *      onReady is called, set hasOnReadyEffectCalled.current to true
+   *   3. The useEffect for loadScript executes
+   *   4. The script is already loaded, loadScript bails out
+   *   [If strict mode is enabled / is wrapped in <OffScreen /> component]
+   *   5. The useEffect for onReady executes again
+   *   6. hasOnReadyEffectCalled.current is true, so entire effect is skipped
+   *   7. The useEffect for loadScript executes again
+   *   8. The script is already loaded, loadScript will bail out
+   */
+  const hasOnReadyEffectCalled = useRef(false)
+
   useEffect(() => {
     const cacheKey = id || src
+    if (!hasOnReadyEffectCalled.current) {
+      // Run onReady if script has loaded before but component is re-mounted
+      if (onReady && cacheKey && LoadCache.has(cacheKey)) {
+        onReady()
+      }
 
-    // Run onReady if script has loaded before but component is re-mounted
-    if (onReady && cacheKey && LoadCache.has(cacheKey)) {
-      onReady()
+      hasOnReadyEffectCalled.current = true
     }
   }, [onReady, id, src])
 
diff --git a/test/integration/script-loader/strictmode/next.config.js b/test/integration/script-loader/base/next.config.js
similarity index 100%
rename from test/integration/script-loader/strictmode/next.config.js
rename to test/integration/script-loader/base/next.config.js
diff --git a/test/integration/script-loader/base/pages/page10.js b/test/integration/script-loader/base/pages/page10.js
index dd10c2f6a1d1..e2fdde0e776f 100644
--- a/test/integration/script-loader/base/pages/page10.js
+++ b/test/integration/script-loader/base/pages/page10.js
@@ -1,11 +1,6 @@
 import Script from 'next/script'
 import Link from 'next/link'
 
-if (typeof window !== 'undefined') {
-  window.remoteScriptsOnReadyCalls ??= 0
-  window.inlineScriptsOnReadyCalls ??= 0
-}
-
 const Page = () => {
   return (
     <div className="container">
@@ -14,6 +9,7 @@ const Page = () => {
       <Script
         src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
         onReady={() => {
+          window.remoteScriptsOnReadyCalls ??= 0
           window.remoteScriptsOnReadyCalls++
         }}
       />
@@ -21,6 +17,7 @@ const Page = () => {
         id="i-am-an-inline-script-that-has-on-ready"
         dangerouslySetInnerHTML={{ __html: 'console.log("inline script!")' }}
         onReady={() => {
+          window.inlineScriptsOnReadyCalls ??= 0
           window.inlineScriptsOnReadyCalls++
         }}
       />
diff --git a/test/integration/script-loader/strictmode/pages/onready.js b/test/integration/script-loader/strictmode/pages/onready.js
deleted file mode 100644
index dd10c2f6a1d1..000000000000
--- a/test/integration/script-loader/strictmode/pages/onready.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Script from 'next/script'
-import Link from 'next/link'
-
-if (typeof window !== 'undefined') {
-  window.remoteScriptsOnReadyCalls ??= 0
-  window.inlineScriptsOnReadyCalls ??= 0
-}
-
-const Page = () => {
-  return (
-    <div className="container">
-      <Link href="/page9">Page 9</Link>
-      <div id="text"></div>
-      <Script
-        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
-        onReady={() => {
-          window.remoteScriptsOnReadyCalls++
-        }}
-      />
-      <Script
-        id="i-am-an-inline-script-that-has-on-ready"
-        dangerouslySetInnerHTML={{ __html: 'console.log("inline script!")' }}
-        onReady={() => {
-          window.inlineScriptsOnReadyCalls++
-        }}
-      />
-    </div>
-  )
-}
-
-export default Page
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index a56ac2bfd6fb..d30692240220 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -17,31 +17,12 @@ import cheerio from 'cheerio'
 
 let appDir = join(__dirname, '../base')
 let appWithPartytownMissingDir = join(__dirname, '../partytown-missing')
-let appWithStrictModeDir = join(__dirname, '../strictmode')
 let server
 let appPort
 
-async function bootApp(dir) {
-  await nextBuild(dir)
-
-  const app = nextServer({
-    dir,
-    dev: false,
-    quiet: true,
-  })
-
-  server = await startApp(app)
-  appPort = server.address().port
-}
-
-describe('Next.js Script - Primary Strategies', () => {
-  beforeAll(async () => {
-    await bootApp(appDir)
-  })
-  afterAll(() => {
-    stopApp(server)
-  })
-
+const runTests = (isDev = false) => {
+  // TODO: We will refactor the next/script to be strict mode resilient
+  // Don't skip the test case for dev mode (strict mode) once refactoring is finished
   it('priority afterInteractive', async () => {
     let browser
     try {
@@ -113,140 +94,120 @@ describe('Next.js Script - Primary Strategies', () => {
     }
   })
 
-  it('priority beforeInteractive', async () => {
-    const html = await renderViaHTTP(appPort, '/page1')
-    const $ = cheerio.load(html)
+  if (!isDev) {
+    it('priority beforeInteractive', async () => {
+      const html = await renderViaHTTP(appPort, '/page1')
+      const $ = cheerio.load(html)
 
-    function test(id) {
-      const script = $(`#${id}`)
-
-      // Renders script tag
-      expect(script.length).toBe(1)
-      expect(script.attr('data-nscript')).toBeDefined()
-
-      // Script is inserted before NextScripts
-      expect(
-        $(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
-      ).toBeGreaterThan(0)
-    }
-
-    test('scriptBeforeInteractive')
-  })
+      function test(id) {
+        const script = $(`#${id}`)
 
-  // Warning - Will be removed in the next major release
-  it('priority beforeInteractive - older version', async () => {
-    const html = await renderViaHTTP(appPort, '/page6')
-    const $ = cheerio.load(html)
-
-    function test(id) {
-      const script = $(`#${id}`)
-
-      // Renders script tag
-      expect(script.length).toBe(1)
-      expect(script.attr('data-nscript')).toBeDefined()
-
-      // Script is inserted before NextScripts
-      expect(
-        $(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
-      ).toBeGreaterThan(0)
-    }
-
-    test('scriptBeforePageRenderOld')
-  })
-
-  it('priority beforeInteractive on navigate', async () => {
-    let browser
-    try {
-      browser = await webdriver(appPort, '/')
+        // Renders script tag
+        expect(script.length).toBe(1)
+        expect(script.attr('data-nscript')).toBeDefined()
 
-      // beforeInteractive scripts should load once
-      let documentBIScripts = await browser.elementsByCss(
-        '[src$="scriptBeforeInteractive"]'
-      )
-      expect(documentBIScripts.length).toBe(2)
+        // Script is inserted before NextScripts
+        expect(
+          $(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
+        ).toBeGreaterThan(0)
+      }
 
-      await browser.waitForElementByCss('[href="/page1"]')
-      await browser.click('[href="/page1"]')
+      test('scriptBeforeInteractive')
+    })
 
-      await browser.waitForElementByCss('.container')
+    // Warning - Will be removed in the next major release
+    it('priority beforeInteractive - older version', async () => {
+      const html = await renderViaHTTP(appPort, '/page6')
+      const $ = cheerio.load(html)
 
-      // Ensure beforeInteractive script isn't duplicated on navigation
-      documentBIScripts = await browser.elementsByCss(
-        '[src$="scriptBeforeInteractive"]'
-      )
-      expect(documentBIScripts.length).toBe(2)
-    } finally {
-      if (browser) await browser.close()
-    }
-  })
+      function test(id) {
+        const script = $(`#${id}`)
 
-  it('onload fires correctly', async () => {
-    let browser
-    try {
-      browser = await webdriver(appPort, '/page4')
-      await waitFor(3000)
+        // Renders script tag
+        expect(script.length).toBe(1)
+        expect(script.attr('data-nscript')).toBeDefined()
 
-      const text = await browser.elementById('text').text()
+        // Script is inserted before NextScripts
+        expect(
+          $(`#${id} ~ script[src^="/_next/static/chunks/main"]`).length
+        ).toBeGreaterThan(0)
+      }
 
-      expect(text).toBe('aaabbbccc')
-    } finally {
-      if (browser) await browser.close()
-    }
-  })
+      test('scriptBeforePageRenderOld')
+    })
 
-  it('onReady fires after load event and then on every subsequent re-mount', async () => {
-    let browser
-    try {
-      browser = await webdriver(appPort, '/page8')
+    it('priority beforeInteractive on navigate', async () => {
+      let browser
+      try {
+        browser = await webdriver(appPort, '/')
 
-      const text = await browser.elementById('text').text()
+        // beforeInteractive scripts should load once
+        let documentBIScripts = await browser.elementsByCss(
+          '[src$="scriptBeforeInteractive"]'
+        )
+        expect(documentBIScripts.length).toBe(2)
 
-      expect(text).toBe('aaa')
+        await browser.waitForElementByCss('[href="/page1"]')
+        await browser.click('[href="/page1"]')
 
-      // 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')
 
-      await browser.waitForElementByCss('.container')
-      const sameText = await browser.elementById('text').text()
+        // Ensure beforeInteractive script isn't duplicated on navigation
+        documentBIScripts = await browser.elementsByCss(
+          '[src$="scriptBeforeInteractive"]'
+        )
+        expect(documentBIScripts.length).toBe(2)
+      } finally {
+        if (browser) await browser.close()
+      }
+    })
+  }
 
-      expect(sameText).toBe('aaa') // onReady should fire again
-    } finally {
-      if (browser) await browser.close()
-    }
-  })
+  if (!isDev) {
+    it('onload fires correctly', async () => {
+      let browser
+      try {
+        browser = await webdriver(appPort, '/page4')
+        await waitFor(3000)
 
-  it('priority beforeInteractive with inline script', async () => {
-    const html = await renderViaHTTP(appPort, '/page5')
-    const $ = cheerio.load(html)
+        const text = await browser.elementById('text').text()
 
-    const script = $('#inline-before')
-    expect(script.length).toBe(1)
+        expect(text).toBe('aaabbbccc')
+      } finally {
+        if (browser) await browser.close()
+      }
+    })
 
-    // Script is inserted before CSS
-    expect(
-      $(`#inline-before ~ link[href^="/_next/static/css"]`).length
-    ).toBeGreaterThan(0)
-  })
+    it('priority beforeInteractive with inline script', async () => {
+      const html = await renderViaHTTP(appPort, '/page5')
+      const $ = cheerio.load(html)
 
-  it('priority beforeInteractive with inline script should execute', async () => {
-    let browser
-    try {
-      browser = await webdriver(appPort, '/page7')
-      await waitFor(1000)
+      const script = $('#inline-before')
+      expect(script.length).toBe(1)
 
-      const logs = await browser.log()
+      // Script is inserted before CSS
       expect(
-        logs.some((log) =>
-          log.message.includes('beforeInteractive inline script run')
-        )
-      ).toBe(true)
-    } finally {
-      if (browser) await browser.close()
-    }
-  })
+        $(`#inline-before ~ link[href^="/_next/static/css"]`).length
+      ).toBeGreaterThan(0)
+    })
+
+    it('priority beforeInteractive with inline script should execute', async () => {
+      let browser
+      try {
+        browser = await webdriver(appPort, '/page7')
+        await waitFor(1000)
+
+        const logs = await browser.log()
+        expect(
+          logs.some((log) =>
+            log.message.includes('beforeInteractive inline script run')
+          )
+        ).toBe(true)
+      } finally {
+        if (browser) await browser.close()
+      }
+    })
+  }
 
   it('Does not duplicate inline scripts', async () => {
     let browser
@@ -283,26 +244,76 @@ describe('Next.js Script - Primary Strategies', () => {
       /It looks like you're trying to use Partytown with next\/script but do not have the required package\(s\) installed.Please install Partytown by running:.*?(npm|pnpm|yarn) (install|add) (--save-dev|--dev) @builder.io\/partytownIf you are not trying to use Partytown, please disable the experimental "nextScriptWorkers" flag in next.config.js./
     )
   })
-})
 
-describe('Next.js Script - Strict Mode', () => {
-  let devAppPort
-  let devApp
+  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()
+    }
+  })
+
   // https://github.com/vercel/next.js/issues/39993
-  it('onReady should only fires once after load event in dev mode (issue #39993)', async () => {
+  it('onReady should only fires once after loaded (issue #39993)', async () => {
     let browser
     try {
-      devAppPort = await findPort()
-      devApp = await launchApp(appWithStrictModeDir, devAppPort)
-      browser = await webdriver(devAppPort, '/onready')
+      browser = await webdriver(appPort, '/page10')
 
-      // wait for jQuery to be loaded
+      // wait for remote script to be loaded
       await waitFor(1000)
       expect(await browser.eval(`window.remoteScriptsOnReadyCalls`)).toBe(1)
       expect(await browser.eval(`window.inlineScriptsOnReadyCalls`)).toBe(1)
     } finally {
       if (browser) await browser.close()
-      if (devApp) await killApp(devApp)
     }
   })
+}
+
+describe('Next.js Script - Primary Strategies - Strict Mode', () => {
+  beforeAll(async () => {
+    appPort = await findPort()
+    server = await launchApp(appDir, appPort)
+  })
+
+  afterAll(async () => {
+    if (server) await killApp(server)
+  })
+
+  runTests(true)
+})
+
+describe('Next.js Script - Primary Strategies - Production Mode', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+
+    const app = nextServer({
+      dir: appDir,
+      dev: false,
+      quiet: true,
+    })
+
+    server = await startApp(app)
+    appPort = server.address().port
+  })
+  afterAll(async () => {
+    await stopApp(server)
+  })
+
+  runTests(false)
 })