diff --git a/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts b/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts
index 6374326b144bf..3a08056442f9b 100644
--- a/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts
+++ b/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts
@@ -4,10 +4,19 @@ import { ResourceRecord, MarkRecord } from "../../records"
 // TODO - Import from gatsby core after gatsby-script is in general availability
 import { ScriptStrategy } from "gatsby-script"
 
-/**
- * The two test suites below test the same thing, inline scripts via dangerouslySetInnerHTML and template literals.
- * To keep the tests flat and easier to debug they are duplicated instead of iterated over.
- */
+// The page that we will assert against
+const page = `/inline-scripts`
+
+const typesOfInlineScripts = [
+  {
+    descriptor: `dangerouslySetInnerHTML`,
+    inlineScriptType: InlineScript.dangerouslySet,
+  },
+  {
+    descriptor: `template literals`,
+    inlineScriptType: InlineScript.templateLiteral,
+  },
+]
 
 beforeEach(() => {
   cy.intercept(new RegExp(`framework`), { middleware: true }, req => {
@@ -17,184 +26,252 @@ beforeEach(() => {
   })
 })
 
-describe(`inline scripts set via dangerouslySetInnerHTML`, () => {
-  describe(`using the ${ScriptStrategy.preHydrate} strategy`, () => {
-    it(`should execute successfully`, () => {
-      cy.visit(`/`)
-
-      cy.getRecord(
-        `${ScriptStrategy.preHydrate}-${InlineScript.dangerouslySet}`,
-        `success`,
-        true
-      ).should(`equal`, `true`)
-    })
+/**
+ * Normally we would duplicate the tests so they're flatter and easier to debug,
+ * but since the test count grew and the cases are exactly the same we'll iterate.
+ */
 
-    it(`should load before other strategies`, () => {
-      cy.visit(`/`)
+for (const { descriptor, inlineScriptType } of typesOfInlineScripts) {
+  describe(`inline scripts set via ${descriptor}`, () => {
+    describe(`using the ${ScriptStrategy.preHydrate} strategy`, () => {
+      it(`should execute successfully`, () => {
+        cy.visit(page)
 
-      cy.getRecord(
-        `${ScriptStrategy.preHydrate}-${InlineScript.dangerouslySet}`,
-        MarkRecord.executeStart
-      ).then(dangerouslySetExecuteStart => {
         cy.getRecord(
-          `${ScriptStrategy.postHydrate}-${InlineScript.dangerouslySet}`,
-          MarkRecord.executeStart
-        ).should(`be.greaterThan`, dangerouslySetExecuteStart)
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+          `success`,
+          true
+        ).should(`equal`, `true`)
+      })
+
+      it(`should load before other strategies`, () => {
+        cy.visit(page)
 
         cy.getRecord(
-          `${ScriptStrategy.idle}-${InlineScript.dangerouslySet}`,
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
           MarkRecord.executeStart
-        ).should(`be.greaterThan`, dangerouslySetExecuteStart)
+        ).then(dangerouslySetExecuteStart => {
+          cy.getRecord(
+            `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+            MarkRecord.executeStart
+          ).should(`be.greaterThan`, dangerouslySetExecuteStart)
+
+          cy.getRecord(
+            `${ScriptStrategy.idle}-${inlineScriptType}`,
+            MarkRecord.executeStart
+          ).should(`be.greaterThan`, dangerouslySetExecuteStart)
+        })
       })
     })
-  })
 
-  describe(`using the ${ScriptStrategy.postHydrate} strategy`, () => {
-    it(`should execute successfully`, () => {
-      cy.visit(`/`)
+    describe(`using the ${ScriptStrategy.postHydrate} strategy`, () => {
+      it(`should execute successfully`, () => {
+        cy.visit(page)
 
-      cy.getRecord(
-        `${ScriptStrategy.postHydrate}-${InlineScript.dangerouslySet}`,
-        `success`,
-        true
-      ).should(`equal`, `true`)
-    })
-
-    it(`should load after the framework bundle has loaded`, () => {
-      cy.visit(`/`)
-
-      // Assert framework is loaded before inline script is executed
-      cy.getRecord(
-        `${ScriptStrategy.postHydrate}-${InlineScript.dangerouslySet}`,
-        MarkRecord.executeStart
-      ).then(dangerouslySetExecuteStart => {
-        cy.getRecord(`framework`, ResourceRecord.responseEnd).should(
-          `be.lessThan`,
-          dangerouslySetExecuteStart
-        )
+        cy.getRecord(
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          `success`,
+          true
+        ).should(`equal`, `true`)
       })
-    })
-  })
 
-  describe(`using the ${ScriptStrategy.idle} strategy`, () => {
-    it(`should execute successfully`, () => {
-      cy.visit(`/`)
+      it(`should load after the framework bundle has loaded`, () => {
+        cy.visit(page)
 
-      cy.getRecord(
-        `${ScriptStrategy.idle}-${InlineScript.dangerouslySet}`,
-        `success`,
-        true
-      ).should(`equal`, `true`)
+        // Assert framework is loaded before inline script is executed
+        cy.getRecord(
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          MarkRecord.executeStart
+        ).then(dangerouslySetExecuteStart => {
+          cy.getRecord(`framework`, ResourceRecord.responseEnd).should(
+            `be.lessThan`,
+            dangerouslySetExecuteStart
+          )
+        })
+      })
     })
 
-    it(`should load before other strategies`, () => {
-      cy.visit(`/`)
+    describe(`using the ${ScriptStrategy.idle} strategy`, () => {
+      it(`should execute successfully`, () => {
+        cy.visit(page)
 
-      cy.getRecord(
-        `${ScriptStrategy.idle}-${InlineScript.dangerouslySet}`,
-        MarkRecord.executeStart
-      ).then(dangerouslySetExecuteStart => {
         cy.getRecord(
-          `${ScriptStrategy.preHydrate}-${InlineScript.dangerouslySet}`,
-          MarkRecord.executeStart
-        ).should(`be.lessThan`, dangerouslySetExecuteStart)
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
+          `success`,
+          true
+        ).should(`equal`, `true`)
+      })
+
+      it(`should load before other strategies`, () => {
+        cy.visit(page)
 
         cy.getRecord(
-          `${ScriptStrategy.postHydrate}-${InlineScript.dangerouslySet}`,
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
           MarkRecord.executeStart
-        ).should(`be.lessThan`, dangerouslySetExecuteStart)
+        ).then(dangerouslySetExecuteStart => {
+          cy.getRecord(
+            `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+            MarkRecord.executeStart
+          ).should(`be.lessThan`, dangerouslySetExecuteStart)
+
+          cy.getRecord(
+            `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+            MarkRecord.executeStart
+          ).should(`be.lessThan`, dangerouslySetExecuteStart)
+        })
       })
     })
-  })
-})
 
-describe(`inline scripts set via template literals`, () => {
-  describe(`using the ${ScriptStrategy.preHydrate} strategy`, () => {
-    it(`should execute successfully`, () => {
-      cy.visit(`/`)
+    describe(`when navigation occurs`, () => {
+      it(`should load only once on initial page load`, () => {
+        cy.visit(page)
 
-      cy.getRecord(
-        `${ScriptStrategy.preHydrate}-${InlineScript.templateLiteral}`,
-        `success`,
-        true
-      ).should(`equal`, `true`)
-    })
+        cy.get(`table[id=script-mark-records] tbody`)
+          .children()
+          .should(`have.length`, 6)
+        cy.getRecord(
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.preHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.postHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.idle)
+      })
 
-    it(`should load before other strategies`, () => {
-      cy.visit(`/`)
+      it(`should load only once after the page is refreshed`, () => {
+        cy.visit(page)
+        cy.reload()
 
-      cy.getRecord(
-        `${ScriptStrategy.preHydrate}-${InlineScript.templateLiteral}`,
-        MarkRecord.executeStart
-      ).then(templateLiteralExecuteStart => {
+        cy.get(`table[id=script-mark-records] tbody`)
+          .children()
+          .should(`have.length`, 6)
         cy.getRecord(
-          `${ScriptStrategy.postHydrate}-${InlineScript.templateLiteral}`,
-          MarkRecord.executeStart
-        ).should(`be.greaterThan`, templateLiteralExecuteStart)
-
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.preHydrate)
         cy.getRecord(
-          `${ScriptStrategy.idle}-${InlineScript.templateLiteral}`,
-          MarkRecord.executeStart
-        ).should(`be.greaterThan`, templateLiteralExecuteStart)
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.postHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.idle)
       })
-    })
-  })
 
-  describe(`using the ${ScriptStrategy.postHydrate} strategy`, () => {
-    it(`should execute successfully`, () => {
-      cy.visit(`/`)
+      it(`should load only once after anchor link navigation`, () => {
+        cy.visit(page)
+        cy.get(`a[id=anchor-link-back-to-index]`).click()
+        cy.get(`a[href="${page}"][id=anchor-link]`).click()
 
-      cy.getRecord(
-        `${ScriptStrategy.postHydrate}-${InlineScript.templateLiteral}`,
-        `success`,
-        true
-      ).should(`equal`, `true`)
-    })
-
-    it(`should load after the framework bundle has loaded`, () => {
-      cy.visit(`/`)
-
-      // Assert framework is loaded before inline script is executed
-      cy.getRecord(
-        `${ScriptStrategy.postHydrate}-${InlineScript.templateLiteral}`,
-        MarkRecord.executeStart
-      ).then(templateLiteralExecuteStart => {
-        cy.getRecord(`framework`, ResourceRecord.responseEnd).should(
-          `be.lessThan`,
-          templateLiteralExecuteStart
-        )
+        cy.get(`table[id=script-mark-records] tbody`)
+          .children()
+          .should(`have.length`, 6)
+        cy.getRecord(
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.preHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.postHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.idle)
       })
-    })
-  })
 
-  describe(`using the ${ScriptStrategy.idle} strategy`, () => {
-    it(`should execute successfully`, () => {
-      cy.visit(`/`)
+      it(`should load only once if the page is revisited via browser back/forward buttons after anchor link navigation`, () => {
+        cy.visit(`/`)
+        cy.get(`a[href="${page}"][id=anchor-link]`).click()
+        cy.go(`back`)
+        cy.go(`forward`)
 
-      cy.getRecord(
-        `${ScriptStrategy.idle}-${InlineScript.templateLiteral}`,
-        `success`,
-        true
-      ).should(`equal`, `true`)
-    })
+        cy.get(`table[id=script-mark-records] tbody`)
+          .children()
+          .should(`have.length`, 6)
+        cy.getRecord(
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.preHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.postHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.idle)
+      })
 
-    it(`should load before other strategies`, () => {
-      cy.visit(`/`)
+      it(`should load only once after Gatsby link navigation`, () => {
+        cy.visit(page)
+        cy.get(`a[id=gatsby-link-back-to-index]`).click()
+        cy.get(`a[href="${page}"][id=gatsby-link]`).click()
 
-      cy.getRecord(
-        `${ScriptStrategy.idle}-${InlineScript.templateLiteral}`,
-        MarkRecord.executeStart
-      ).then(templateLiteralExecuteStart => {
+        cy.get(`table[id=script-mark-records] tbody`)
+          .children()
+          .should(`have.length`, 6)
         cy.getRecord(
-          `${ScriptStrategy.preHydrate}-${InlineScript.templateLiteral}`,
-          MarkRecord.executeStart
-        ).should(`be.lessThan`, templateLiteralExecuteStart)
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.preHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.postHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.idle)
+      })
 
+      // TODO - Fix
+      it.skip(`should load only once if the page is revisited via browser back/forward buttons after Gatsby link navigation`, () => {
+        cy.visit(`/`)
+        cy.get(`a[href="${page}"][id=gatsby-link]`).click()
+        cy.go(`back`)
+        cy.go(`forward`)
+
+        cy.get(`table[id=script-mark-records] tbody`)
+          .children()
+          .should(`have.length`, 6)
         cy.getRecord(
-          `${ScriptStrategy.postHydrate}-${InlineScript.templateLiteral}`,
-          MarkRecord.executeStart
-        ).should(`be.lessThan`, templateLiteralExecuteStart)
+          `${ScriptStrategy.preHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.preHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.postHydrate}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.postHydrate)
+        cy.getRecord(
+          `${ScriptStrategy.idle}-${inlineScriptType}`,
+          `strategy`,
+          true
+        ).should(`equal`, ScriptStrategy.idle)
       })
     })
   })
-})
+}
diff --git a/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts b/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts
index 60026ab579403..b5291122ca5bf 100644
--- a/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts
+++ b/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts
@@ -4,6 +4,9 @@ import { ResourceRecord } from "../../records"
 // TODO - Import from gatsby core after gatsby-script is in general availability
 import { ScriptStrategy } from "gatsby-script"
 
+// The page that we will assert against
+const page = `/scripts-with-sources`
+
 beforeEach(() => {
   // @ts-ignore Object.values does exist, Cypress wants ES5 in tsconfig
   for (const script of [...Object.values(scripts), new RegExp(`framework`)]) {
@@ -18,12 +21,12 @@ beforeEach(() => {
 describe(`scripts with sources`, () => {
   describe(`using the ${ScriptStrategy.preHydrate} strategy`, () => {
     it(`should load successfully`, () => {
-      cy.visit(`/`)
+      cy.visit(page)
       cy.getRecord(Script.dayjs, `success`, true).should(`equal`, `true`)
     })
 
     it(`should load before other strategies`, () => {
-      cy.visit(`/`)
+      cy.visit(page)
 
       cy.getRecord(Script.dayjs, ResourceRecord.fetchStart).then(
         dayjsFetchStart => {
@@ -39,16 +42,24 @@ describe(`scripts with sources`, () => {
         }
       )
     })
+
+    it(`should call an on load callback once the script has loaded`, () => {
+      cy.visit(page)
+
+      cy.getRecord(Script.dayjs, ResourceRecord.responseEnd).then(() => {
+        cy.get(`[data-on-load-result=${ScriptStrategy.preHydrate}]`)
+      })
+    })
   })
 
   describe(`using the ${ScriptStrategy.postHydrate} strategy`, () => {
     it(`should load successfully`, () => {
-      cy.visit(`/`)
+      cy.visit(page)
       cy.getRecord(Script.three, `success`, true).should(`equal`, `true`)
     })
 
     it(`should load after the framework bundle has loaded`, () => {
-      cy.visit(`/`)
+      cy.visit(page)
 
       // Assert framework is loaded before three starts loading
       cy.getRecord(Script.three, ResourceRecord.fetchStart).then(
@@ -60,16 +71,23 @@ describe(`scripts with sources`, () => {
         }
       )
     })
+
+    it(`should call an on load callback once the script has loaded`, () => {
+      cy.visit(page)
+      cy.getRecord(Script.three, ResourceRecord.responseEnd).then(() => {
+        cy.get(`[data-on-load-result=${ScriptStrategy.postHydrate}]`)
+      })
+    })
   })
 
   describe(`using the ${ScriptStrategy.idle} strategy`, () => {
     it(`should load successfully`, () => {
-      cy.visit(`/`)
+      cy.visit(page)
       cy.getRecord(Script.marked, `success`, true).should(`equal`, `true`)
     })
 
     it(`should load after other strategies`, () => {
-      cy.visit(`/`)
+      cy.visit(page)
 
       cy.getRecord(Script.marked, ResourceRecord.fetchStart).then(
         markedFetchStart => {
@@ -85,5 +103,146 @@ describe(`scripts with sources`, () => {
         }
       )
     })
+
+    it(`should call an on load callback once the script has loaded`, () => {
+      cy.visit(page)
+      cy.getRecord(Script.marked, ResourceRecord.responseEnd).then(() => {
+        cy.get(`[data-on-load-result=${ScriptStrategy.idle}]`)
+      })
+    })
+  })
+
+  describe(`when navigation occurs`, () => {
+    it(`should load only once on initial page load`, () => {
+      cy.visit(page)
+
+      cy.get(`table[id=script-resource-records] tbody`)
+        .children()
+        .should(`have.length`, 4)
+      cy.getRecord(Script.dayjs, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.preHydrate
+      )
+      cy.getRecord(Script.three, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.postHydrate
+      )
+      cy.getRecord(Script.marked, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.idle
+      )
+    })
+
+    it(`should load only once after the page is refreshed`, () => {
+      cy.visit(page)
+      cy.reload()
+
+      cy.get(`table[id=script-resource-records] tbody`)
+        .children()
+        .should(`have.length`, 4)
+      cy.getRecord(Script.dayjs, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.preHydrate
+      )
+      cy.getRecord(Script.three, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.postHydrate
+      )
+      cy.getRecord(Script.marked, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.idle
+      )
+    })
+
+    it(`should load only once after anchor link navigation`, () => {
+      cy.visit(page)
+      cy.get(`a[id=anchor-link-back-to-index]`).click()
+      cy.get(`a[href="${page}"][id=anchor-link]`).click()
+
+      cy.get(`table[id=script-resource-records] tbody`)
+        .children()
+        .should(`have.length`, 4)
+      cy.getRecord(Script.dayjs, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.preHydrate
+      )
+      cy.getRecord(Script.three, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.postHydrate
+      )
+      cy.getRecord(Script.marked, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.idle
+      )
+    })
+
+    it(`should load only once if the page is revisited via browser back/forward buttons after anchor link navigation`, () => {
+      cy.visit(`/`)
+      cy.get(`a[href="${page}"][id=anchor-link]`).click()
+      cy.go(`back`)
+      cy.go(`forward`)
+
+      cy.get(`table[id=script-resource-records] tbody`)
+        .children()
+        .should(`have.length`, 4)
+      cy.getRecord(Script.dayjs, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.preHydrate
+      )
+      cy.getRecord(Script.three, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.postHydrate
+      )
+      cy.getRecord(Script.marked, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.idle
+      )
+    })
+
+    it(`should load only once after Gatsby link navigation`, () => {
+      cy.visit(page)
+      cy.get(`a[id=gatsby-link-back-to-index]`).click()
+      cy.get(`a[href="${page}"][id=gatsby-link]`).click()
+
+      cy.get(`table[id=script-resource-records] tbody`)
+        .children()
+        .should(`have.length`, 4)
+      cy.getRecord(Script.dayjs, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.preHydrate
+      )
+      cy.getRecord(Script.three, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.postHydrate
+      )
+      cy.getRecord(Script.marked, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.idle
+      )
+    })
+
+    // TODO - Fix
+    it.skip(`should load only once if the page is revisited via browser back/forward buttons after Gatsby link navigation`, () => {
+      cy.visit(`/`)
+      cy.get(`a[href="${page}"][id=gatsby-link]`).click()
+      cy.go(`back`)
+      cy.go(`forward`)
+
+      cy.get(`table[id=script-resource-records] tbody`)
+        .children()
+        .should(`have.length`, 4)
+      cy.getRecord(Script.dayjs, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.preHydrate
+      )
+      cy.getRecord(Script.three, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.postHydrate
+      )
+      cy.getRecord(Script.marked, `strategy`, true).should(
+        `equal`,
+        ScriptStrategy.idle
+      )
+    })
   })
 })
diff --git a/e2e-tests/gatsby-script/cypress/support/index.ts b/e2e-tests/gatsby-script/cypress/support/index.ts
index 21af0090d113c..51cc2d07d255c 100644
--- a/e2e-tests/gatsby-script/cypress/support/index.ts
+++ b/e2e-tests/gatsby-script/cypress/support/index.ts
@@ -13,7 +13,6 @@ declare global {
         metric: string,
         raw?: boolean
       ): Chainable<number | string>
-      waitForRouteChange(): unknown
     }
   }
 }
diff --git a/e2e-tests/gatsby-script/scripts.ts b/e2e-tests/gatsby-script/scripts.ts
index 6fbfc133ddb73..4c5a963933f5f 100644
--- a/e2e-tests/gatsby-script/scripts.ts
+++ b/e2e-tests/gatsby-script/scripts.ts
@@ -76,13 +76,12 @@ export const inlineScripts = {
 }
 
 function constructInlineScript(type: string, strategy: ScriptStrategy): string {
-  return `(function() {
+  return `
     performance.mark(\`inline-script\`, { detail: {
       strategy: \`${strategy}\`,
       type: \`${type}\`,
       executeStart: performance.now()
     }})
     window[\`${strategy}-${type}\`] = true;
-  })();
   `
 }
diff --git a/e2e-tests/gatsby-script/src/components/script-mark-records.tsx b/e2e-tests/gatsby-script/src/components/script-mark-records.tsx
index 982b63470312b..8f95c6544f745 100644
--- a/e2e-tests/gatsby-script/src/components/script-mark-records.tsx
+++ b/e2e-tests/gatsby-script/src/components/script-mark-records.tsx
@@ -12,57 +12,51 @@ export function ScriptMarkRecords(): JSX.Element {
    * Poll for the mark records we care about.
    * We'll use this approach instead of listening for the load event to be consistent.
    */
-  function getMarkRecords(retries: number = 0): void {
-    const markRecords = performance.getEntriesByType(
-      `mark`
-    ) as Array<PerformanceMarkWithDetails>
-
-    const scriptRecords = markRecords.filter(
-      record => record.name === `inline-script`
-    )
-
-    if (scriptRecords.length !== 6 && retries < 10) {
-      setTimeout(() => {
-        getMarkRecords(retries + 1)
-      }, 100)
-    }
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const markRecords = performance.getEntriesByType(
+        `mark`
+      ) as Array<PerformanceMarkWithDetails>
 
-    setRecords(scriptRecords)
-  }
+      const scriptRecords = markRecords.filter(
+        markRecord => markRecord.name === `inline-script`
+      )
 
-  useEffect(() => {
-    getMarkRecords()
+      if (scriptRecords.length === 6 || performance.now() > 10000) {
+        setRecords(scriptRecords)
+        clearInterval(interval)
+      }
+    }, 100)
   }, [])
 
   return (
-    <>
-      <table>
-        <thead>
-          <tr>
-            <th>Type</th>
-            <th>Strategy</th>
-            <th>Success</th>
-            <th>Execute start (ms)</th>
-          </tr>
-        </thead>
-        <tbody>
-          {records.map(record => {
+    <table id="script-mark-records">
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Strategy</th>
+          <th>Success</th>
+          <th>Execute start (ms)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {records
+          .sort((a, b) => a.detail.executeStart - b.detail.executeStart)
+          .map(record => {
             const { strategy, type, executeStart } = record.detail
             const key = `${strategy}-${type}`
-            // @ts-ignore
+            // @ts-ignore Do not complain about key not being a number
             const success = `${typeof window[key] === `boolean`}`
             return (
               <tr id={key} key={key}>
                 <td id="type">{type}</td>
                 <td id="strategy">{strategy}</td>
-                {/* @ts-ignore */}
                 <td id="success">{success}</td>
                 <td id={MarkRecord.executeStart}>{trim(executeStart)}</td>
               </tr>
             )
           })}
-        </tbody>
-      </table>
-    </>
+      </tbody>
+    </table>
   )
 }
diff --git a/e2e-tests/gatsby-script/src/components/script-resource-records.tsx b/e2e-tests/gatsby-script/src/components/script-resource-records.tsx
index 1af9c4baffa23..3af58252df5f5 100644
--- a/e2e-tests/gatsby-script/src/components/script-resource-records.tsx
+++ b/e2e-tests/gatsby-script/src/components/script-resource-records.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react"
 import {
-  scriptUrls,
   scriptUrlIndex,
   scriptStrategyIndex,
   scriptSuccessIndex,
@@ -9,59 +8,60 @@ import {
 import { ResourceRecord } from "../../records"
 import { trim } from "../utils/trim"
 
+interface Props {
+  check: (record: PerformanceResourceTiming) => boolean
+  count: number
+}
+
 /**
  * Displays performance resource records of scripts in a table.
  */
-export function ScriptResourceRecords(): JSX.Element {
+export function ScriptResourceRecords(props: Props): JSX.Element {
+  const { check, count } = props
+
   const [records, setRecords] = useState<Array<PerformanceResourceTiming>>([])
 
   /**
    * Poll for the resource records we care about.
    * Use this approach since `PerformanceObserver` doesn't give us preload link records (e.g. framework)
    */
-  function getResourceRecords(retries: number = 0): void {
-    const resourceRecords = performance.getEntriesByType(
-      `resource`
-    ) as Array<PerformanceResourceTiming>
-
-    const scriptRecords = resourceRecords.filter(
-      record => scriptUrls.has(record.name) || isFrameworkRecord(record)
-    )
-
-    if (scriptRecords.length !== scriptUrls.size + 1 && retries < 10) {
-      setTimeout(() => {
-        getResourceRecords(retries + 1)
-      }, 100)
-    }
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const resourceRecords = performance.getEntriesByType(
+        `resource`
+      ) as Array<PerformanceResourceTiming>
 
-    setRecords(scriptRecords)
-  }
+      const scriptRecords = resourceRecords.filter(check)
 
-  useEffect(() => {
-    getResourceRecords()
+      if (scriptRecords.length === count || performance.now() > 10000) {
+        setRecords(scriptRecords)
+        clearInterval(interval)
+      }
+    }, 100)
   }, [])
 
   return (
-    <>
-      <table>
-        <thead>
-          <tr>
-            <th>Script</th>
-            <th>Strategy</th>
-            <th>Success</th>
-            <th>Fetch start (ms)</th>
-            <th>Response end (ms)</th>
-          </tr>
-        </thead>
-        <tbody>
-          {records.map(record => {
+    <table id="script-resource-records">
+      <thead>
+        <tr>
+          <th>Script</th>
+          <th>Strategy</th>
+          <th>Success</th>
+          <th>Fetch start (ms)</th>
+          <th>Response end (ms)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {records
+          .sort((a, b) => a.fetchStart - b.fetchStart)
+          .map(record => {
             const { name: url, fetchStart, responseEnd } = record || {}
 
             let name: Script | `framework`
             let strategy: string
             let success: string
 
-            if (isFrameworkRecord(record)) {
+            if (record.name.includes(`framework`)) {
               name = `framework`
               strategy = `N/A`
               success = `N/A`
@@ -81,12 +81,7 @@ export function ScriptResourceRecords(): JSX.Element {
               </tr>
             )
           })}
-        </tbody>
-      </table>
-    </>
+      </tbody>
+    </table>
   )
 }
-
-function isFrameworkRecord(record: PerformanceResourceTiming): boolean {
-  return record.name.includes(`framework`)
-}
diff --git a/e2e-tests/gatsby-script/src/pages/index.tsx b/e2e-tests/gatsby-script/src/pages/index.tsx
index 96cfb10469b3b..e4fa3bd3878f7 100644
--- a/e2e-tests/gatsby-script/src/pages/index.tsx
+++ b/e2e-tests/gatsby-script/src/pages/index.tsx
@@ -1,71 +1,39 @@
 import * as React from "react"
-import { ScriptResourceRecords } from "../components/script-resource-records"
-import { ScriptMarkRecords } from "../components/script-mark-records"
-import { useOccupyMainThread } from "../hooks/use-occupy-main-thread"
-import { scripts, inlineScripts, InlineScript } from "../../scripts"
+import { Link } from "gatsby"
 import "../styles/global.css"
 
-// TODO - Import from gatsby core after gatsby-script is in general availability
-import { Script, ScriptStrategy } from "gatsby-script"
+const pages = [
+  { name: `Scripts with sources`, path: `/scripts-with-sources` },
+  { name: `Inline scripts`, path: `/inline-scripts` },
+]
 
 function IndexPage() {
-  useOccupyMainThread()
-
   return (
     <main>
       <h1>Script component e2e test</h1>
-
-      <br />
-      <h2>Scripts with sources</h2>
-      <ScriptResourceRecords />
-
-      <br />
-      <h2>Inline scripts</h2>
-      <ScriptMarkRecords />
-
-      <Script src={scripts.dayjs} strategy={ScriptStrategy.preHydrate} />
-      <Script src={scripts.three} strategy={ScriptStrategy.postHydrate} />
-      <Script src={scripts.marked} strategy={ScriptStrategy.idle} />
-
-      <Script
-        strategy={ScriptStrategy.preHydrate}
-        dangerouslySetInnerHTML={{
-          __html:
-            inlineScripts[InlineScript.dangerouslySet][
-              ScriptStrategy.preHydrate
-            ],
-        }}
-      />
-      <Script
-        strategy={ScriptStrategy.postHydrate}
-        dangerouslySetInnerHTML={{
-          __html:
-            inlineScripts[InlineScript.dangerouslySet][
-              ScriptStrategy.postHydrate
-            ],
-        }}
-      />
-      <Script
-        strategy={ScriptStrategy.idle}
-        dangerouslySetInnerHTML={{
-          __html:
-            inlineScripts[InlineScript.dangerouslySet][ScriptStrategy.idle],
-        }}
-      />
-
-      <Script strategy={ScriptStrategy.preHydrate}>
-        {inlineScripts[InlineScript.templateLiteral][ScriptStrategy.preHydrate]}
-      </Script>
-      <Script strategy={ScriptStrategy.postHydrate}>
-        {
-          inlineScripts[InlineScript.templateLiteral][
-            ScriptStrategy.postHydrate
-          ]
-        }
-      </Script>
-      <Script strategy={ScriptStrategy.idle}>
-        {inlineScripts[InlineScript.templateLiteral][ScriptStrategy.idle]}
-      </Script>
+      <p>Tests are on other pages, links below.</p>
+
+      <p>Links to pages (anchor):</p>
+      <ul>
+        {pages.map(({ name, path }) => (
+          <li>
+            <a href={path} id="anchor-link">
+              {`${name} (anchor)`}
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      <p>Links to pages (gatsby-link):</p>
+      <ul>
+        {pages.map(({ name, path }) => (
+          <li>
+            <Link to={path} id="gatsby-link">
+              {`${name} (gatsby-link)`}
+            </Link>
+          </li>
+        ))}
+      </ul>
     </main>
   )
 }
diff --git a/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx b/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx
new file mode 100644
index 0000000000000..27d3a2e4c75a3
--- /dev/null
+++ b/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx
@@ -0,0 +1,99 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import { ScriptResourceRecords } from "../components/script-resource-records"
+import { ScriptMarkRecords } from "../components/script-mark-records"
+import { useOccupyMainThread } from "../hooks/use-occupy-main-thread"
+import { inlineScripts, InlineScript } from "../../scripts"
+import "../styles/global.css"
+
+// TODO - Import from gatsby core after gatsby-script is in general availability
+import { Script, ScriptStrategy } from "gatsby-script"
+
+function IndexPage() {
+  useOccupyMainThread()
+
+  return (
+    <main>
+      <h1>Script component e2e test</h1>
+
+      <br />
+      <h2>Framework script</h2>
+      <ScriptResourceRecords
+        check={record => record.name.includes(`framework`)}
+        count={1}
+      />
+
+      <br />
+      <h2>Inline scripts</h2>
+      <ScriptMarkRecords />
+
+      <br />
+      <ul>
+        <li>
+          <a href="/" id="anchor-link-back-to-index">
+            Back to index (anchor)
+          </a>
+        </li>
+        <li>
+          <Link to="/" id="gatsby-link-back-to-index">
+            Back to index (gatsby-link)
+          </Link>
+        </li>
+      </ul>
+
+      <Script
+        id={`${InlineScript.dangerouslySet}-${ScriptStrategy.preHydrate}`}
+        strategy={ScriptStrategy.preHydrate}
+        dangerouslySetInnerHTML={{
+          __html:
+            inlineScripts[InlineScript.dangerouslySet][
+              ScriptStrategy.preHydrate
+            ],
+        }}
+      />
+      <Script
+        id={`${InlineScript.dangerouslySet}-${ScriptStrategy.postHydrate}`}
+        strategy={ScriptStrategy.postHydrate}
+        dangerouslySetInnerHTML={{
+          __html:
+            inlineScripts[InlineScript.dangerouslySet][
+              ScriptStrategy.postHydrate
+            ],
+        }}
+      />
+      <Script
+        id={`${InlineScript.dangerouslySet}-${ScriptStrategy.idle}`}
+        strategy={ScriptStrategy.idle}
+        dangerouslySetInnerHTML={{
+          __html:
+            inlineScripts[InlineScript.dangerouslySet][ScriptStrategy.idle],
+        }}
+      />
+
+      <Script
+        id={`${InlineScript.templateLiteral}-${ScriptStrategy.preHydrate}`}
+        strategy={ScriptStrategy.preHydrate}
+      >
+        {inlineScripts[InlineScript.templateLiteral][ScriptStrategy.preHydrate]}
+      </Script>
+      <Script
+        id={`${InlineScript.templateLiteral}-${ScriptStrategy.postHydrate}`}
+        strategy={ScriptStrategy.postHydrate}
+      >
+        {
+          inlineScripts[InlineScript.templateLiteral][
+            ScriptStrategy.postHydrate
+          ]
+        }
+      </Script>
+      <Script
+        id={`${InlineScript.templateLiteral}-${ScriptStrategy.idle}`}
+        strategy={ScriptStrategy.idle}
+      >
+        {inlineScripts[InlineScript.templateLiteral][ScriptStrategy.idle]}
+      </Script>
+    </main>
+  )
+}
+
+export default IndexPage
diff --git a/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx b/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx
new file mode 100644
index 0000000000000..939c5c13c5efa
--- /dev/null
+++ b/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx
@@ -0,0 +1,61 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import { ScriptResourceRecords } from "../components/script-resource-records"
+import { useOccupyMainThread } from "../hooks/use-occupy-main-thread"
+import { scripts, scriptUrls } from "../../scripts"
+import { onLoad } from "../utils/on-load"
+import "../styles/global.css"
+
+// TODO - Import from gatsby core after gatsby-script is in general availability
+import { Script, ScriptStrategy } from "gatsby-script"
+
+function IndexPage() {
+  useOccupyMainThread()
+
+  return (
+    <main>
+      <h1>Script component e2e test</h1>
+
+      <br />
+      <h2>Scripts with sources</h2>
+      <ScriptResourceRecords
+        check={record =>
+          scriptUrls.has(record.name) || record.name.includes(`framework`)
+        }
+        count={4}
+      />
+
+      <br />
+      <ul>
+        <li>
+          <a href="/" id="anchor-link-back-to-index">
+            Back to index (anchor)
+          </a>
+        </li>
+        <li>
+          <Link to="/" id="gatsby-link-back-to-index">
+            Back to index (gatsby-link)
+          </Link>
+        </li>
+      </ul>
+
+      <Script
+        src={scripts.dayjs}
+        strategy={ScriptStrategy.preHydrate}
+        onLoad={() => onLoad(ScriptStrategy.preHydrate)}
+      />
+      <Script
+        src={scripts.three}
+        strategy={ScriptStrategy.postHydrate}
+        onLoad={() => onLoad(ScriptStrategy.postHydrate)}
+      />
+      <Script
+        src={scripts.marked}
+        strategy={ScriptStrategy.idle}
+        onLoad={() => onLoad(ScriptStrategy.idle)}
+      />
+    </main>
+  )
+}
+
+export default IndexPage
diff --git a/e2e-tests/gatsby-script/src/utils/on-load.ts b/e2e-tests/gatsby-script/src/utils/on-load.ts
new file mode 100644
index 0000000000000..99e9b129f07c6
--- /dev/null
+++ b/e2e-tests/gatsby-script/src/utils/on-load.ts
@@ -0,0 +1,5 @@
+export function onLoad(id: string): void {
+  const element = document.createElement(`span`)
+  element.dataset.onLoadResult = id
+  document.body.appendChild(element)
+}
diff --git a/packages/gatsby-script/.eslintrc.yaml b/packages/gatsby-script/.eslintrc.yaml
new file mode 100644
index 0000000000000..5c9fc4c255341
--- /dev/null
+++ b/packages/gatsby-script/.eslintrc.yaml
@@ -0,0 +1,2 @@
+env:
+  browser: true
diff --git a/packages/gatsby-script/src/__tests__/gatsby-script.tsx b/packages/gatsby-script/src/__tests__/gatsby-script.tsx
index 7b9678a47abf2..d12637138ae99 100644
--- a/packages/gatsby-script/src/__tests__/gatsby-script.tsx
+++ b/packages/gatsby-script/src/__tests__/gatsby-script.tsx
@@ -3,8 +3,8 @@
  */
 
 import React from "react"
-import { render } from "@testing-library/react"
-import { Script, ScriptStrategy } from "../gatsby-script"
+import { render } from "@testing-library/react/pure"
+import { Script, ScriptStrategy, scriptCache } from "../gatsby-script"
 
 const scripts: Record<string, string> = {
   react: `https://unpkg.com/react@18/umd/react.development.js`,
@@ -21,9 +21,12 @@ describe(`Script`, () => {
   beforeAll(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     global.requestIdleCallback = jest.fn<any, any>(callback => callback())
+    // @ts-ignore Mock it out for now
+    performance.getEntriesByName = jest.fn(() => [])
   })
 
   afterEach(() => {
+    scriptCache.delete(scripts.react)
     while (document.body.hasChildNodes()) {
       document.body.lastElementChild?.remove()
     }
diff --git a/packages/gatsby-script/src/gatsby-script.tsx b/packages/gatsby-script/src/gatsby-script.tsx
index 6c7f5c78c0bba..4fef8bb84b5bd 100644
--- a/packages/gatsby-script/src/gatsby-script.tsx
+++ b/packages/gatsby-script/src/gatsby-script.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React, { useRef, useEffect } from "react"
 import type { ReactElement, ScriptHTMLAttributes } from "react"
 
 export enum ScriptStrategy {
@@ -8,9 +8,12 @@ export enum ScriptStrategy {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export interface ScriptProps extends ScriptHTMLAttributes<HTMLScriptElement> {
+export interface ScriptProps
+  extends Omit<ScriptHTMLAttributes<HTMLScriptElement>, `onLoad`> {
+  id?: string
   strategy?: ScriptStrategy
   children?: string
+  onLoad?: (event: Event) => void
 }
 
 const handledProps = new Set([
@@ -18,26 +21,60 @@ const handledProps = new Set([
   `strategy`,
   `dangerouslySetInnerHTML`,
   `children`,
+  `onLoad`,
 ])
 
+export const scriptCache = new Set()
+
 export function Script(props: ScriptProps): ReactElement {
-  const { src, strategy = ScriptStrategy.postHydrate } = props || {}
+  const { src, strategy = ScriptStrategy.postHydrate, onLoad } = props || {}
+
+  const ref = useRef<HTMLScriptElement>(null)
 
   useEffect(() => {
+    let script: HTMLScriptElement | null
+
     switch (strategy) {
+      case ScriptStrategy.preHydrate:
+        // If the navigation is client-side (e.g. via gatsby-link), treat it like post-hydrate.
+        // We probably want to make the router write to history so we can compare that instead.
+        // The current approach doesn't solve the browser back/forward button use case.
+        if (!performance.getEntriesByName(location.href).length) {
+          script = injectScript(props)
+        }
+        break
       case ScriptStrategy.postHydrate:
-        injectScript(props)
+        script = injectScript(props)
         break
       case ScriptStrategy.idle:
         requestIdleCallback(() => {
-          injectScript(props)
+          script = injectScript(props)
         })
         break
-      default:
-        return
+    }
+
+    return (): void => {
+      if (onLoad) {
+        script?.removeEventListener(`load`, onLoad)
+      }
+      script?.remove()
     }
   }, [])
 
+  // Handle events for non-inline pre-hydrate scripts
+  useEffect(() => {
+    if (onLoad) {
+      ref?.current?.addEventListener(`load`, onLoad)
+    }
+
+    return (): void => {
+      if (onLoad) {
+        ref?.current?.removeEventListener(`load`, onLoad)
+      }
+      ref?.current?.remove()
+    }
+  }, [ref])
+
   if (strategy === ScriptStrategy.preHydrate) {
     const inlineScript = resolveInlineScript(props)
     const attributes = resolveAttributes(props)
@@ -50,19 +87,36 @@ export function Script(props: ScriptProps): ReactElement {
       )
     }
 
-    return <script async src={src} data-strategy={strategy} {...attributes} />
+    return (
+      <script
+        ref={ref}
+        async
+        src={src}
+        data-strategy={strategy}
+        {...attributes}
+      />
+    )
   }
 
   return <></>
 }
 
-function injectScript(props: ScriptProps): void {
-  const { src, strategy = ScriptStrategy.postHydrate } = props || {}
+function injectScript(props: ScriptProps): HTMLScriptElement | null {
+  const { id, src, strategy = ScriptStrategy.postHydrate, onLoad } = props || {}
+
+  if (scriptCache.has(id || src)) {
+    return null
+  }
+
   const inlineScript = resolveInlineScript(props)
   const attributes = resolveAttributes(props)
 
   const script = document.createElement(`script`)
 
+  if (id) {
+    script.id = id
+  }
+
   script.dataset.strategy = strategy
 
   for (const [key, value] of Object.entries(attributes)) {
@@ -77,7 +131,15 @@ function injectScript(props: ScriptProps): void {
     script.src = src
   }
 
+  if (onLoad) {
+    script.addEventListener(`load`, onLoad)
+  }
+
   document.body.appendChild(script)
+
+  scriptCache.add(id || src)
+
+  return script
 }
 
 function resolveInlineScript(props: ScriptProps): string {