Repository: next.js
Issue: <Script/> with beforeInteractive failing
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.1
      npm: 8.1.2
      Yarn: 1.22.17
      pnpm: 7.14.0
    Relevant packages:
      next: 13.0.1-canary.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

### What browser are you using? (if relevant)

All browsers

### How are you deploying your application? (if relevant)

`next dev`

### Describe the Bug

I'm new to Next, although, this appears to be a bug (apologies if I'm missing something).

I'm having issues adding `strategy="beforeInteractive"` to `<Script/>`.

When adding this to the `layout.tsx` of the latest create-next-app (13.0.1-canary.0):

```TSX
<head>
  ...
  <Script
    id="logHi"
    strategy="beforeInteractive"
    dangerouslySetInnerHTML={{ __html: `console.log('Hi')` }}
  />
</head>
```

The following errors are thrown in the client:

```
Warning: Expected server HTML to contain a matching <script> in <head>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
```

<details>
  <summary>Full trace</summary>
  
  ```
react_devtools_backend.js:4026 Warning: Expected server HTML to contain a matching <script> in <head>.
    at script
    at Script (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/script.js:129:13)
    at head
    at html
    at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:53:9)
    at HotReload (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
    at Router (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/app-router.js:73:11)
    at ErrorBoundaryHandler (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:28:9)
    at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:40:11)
    at AppRouter
    at ServerRoot (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:114:11)
    at RSCComponent
    at Root (webpack-internal:///./node_modules/.pnpm/next@13.0.1-canary.0_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:130:11)
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js?f14d:94
error @ react-dom.development.js?f14d:68
warnForInsertedHydratedElement @ react-dom.development.js?f14d:10647
didNotFindHydratableInstance @ react-dom.development.js?f14d:13468
warnNonhydratedInstance @ react-dom.development.js?f14d:14518
tryToClaimNextHydratableInstance @ react-dom.development.js?f14d:14692
updateHostComponent @ react-dom.development.js?f14d:22712
beginWork @ react-dom.development.js?f14d:24538
beginWork$1 @ react-dom.development.js?f14d:31617
performUnitOfWork @ react-dom.development.js?f14d:30549
workLoopConcurrent @ react-dom.development.js?f14d:30535
renderRootConcurrent @ react-dom.development.js?f14d:30474
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29662
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react-dom.development.js?f14d:14643 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?f14d:14643:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?f14d:14693:1)
    at updateHostComponent (react-dom.development.js?f14d:22712:1)
    at beginWork (react-dom.development.js?f14d:24538:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?f14d:4248:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?f14d:4297:1)
    at invokeGuardedCallback (react-dom.development.js?f14d:4361:1)
    at beginWork$1 (react-dom.development.js?f14d:31642:1)
    at performUnitOfWork (react-dom.development.js?f14d:30549:1)
    at workLoopConcurrent (react-dom.development.js?f14d:30535:1)
throwOnHydrationMismatch @ react-dom.development.js?f14d:14643
tryToClaimNextHydratableInstance @ react-dom.development.js?f14d:14693
updateHostComponent @ react-dom.development.js?f14d:22712
beginWork @ react-dom.development.js?f14d:24538
callCallback @ react-dom.development.js?f14d:4248
invokeGuardedCallbackDev @ react-dom.development.js?f14d:4297
invokeGuardedCallback @ react-dom.development.js?f14d:4361
beginWork$1 @ react-dom.development.js?f14d:31642
performUnitOfWork @ react-dom.development.js?f14d:30549
workLoopConcurrent @ react-dom.development.js?f14d:30535
renderRootConcurrent @ react-dom.development.js?f14d:30474
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29662
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react_devtools_backend.js:4026 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js?f14d:94
error @ react-dom.development.js?f14d:68
errorHydratingContainer @ react-dom.development.js?f14d:13483
recoverFromConcurrentError @ react-dom.development.js?f14d:29772
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29675
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react-dom.development.js?f14d:14643 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?f14d:14643:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?f14d:14693:1)
    at updateHostComponent (react-dom.development.js?f14d:22712:1)
    at beginWork (react-dom.development.js?f14d:24538:1)
    at beginWork$1 (react-dom.development.js?f14d:31617:1)
    at performUnitOfWork (react-dom.development.js?f14d:30549:1)
    at workLoopConcurrent (react-dom.development.js?f14d:30535:1)
    at renderRootConcurrent (react-dom.development.js?f14d:30474:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?f14d:29662:1)
    at workLoop (index.js?a586:10:3922)
throwOnHydrationMismatch @ react-dom.development.js?f14d:14643
tryToClaimNextHydratableInstance @ react-dom.development.js?f14d:14693
updateHostComponent @ react-dom.development.js?f14d:22712
beginWork @ react-dom.development.js?f14d:24538
beginWork$1 @ react-dom.development.js?f14d:31617
performUnitOfWork @ react-dom.development.js?f14d:30549
workLoopConcurrent @ react-dom.development.js?f14d:30535
renderRootConcurrent @ react-dom.development.js?f14d:30474
performConcurrentWorkOnRoot @ react-dom.development.js?f14d:29662
workLoop @ index.js?a586:10
flushWork @ index.js?a586:10
performWorkUntilDeadline @ index.js?a586:10
react-dom.development.js?f14d:22659 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js?f14d:22659:1)
    at beginWork (react-dom.development.js?f14d:24521:1)
    at beginWork$1 (react-dom.development.js?f14d:31617:1)
    at performUnitOfWork (react-dom.development.js?f14d:30549:1)
    at workLoopSync (react-dom.development.js?f14d:30434:1)
    at renderRootSync (react-dom.development.js?f14d:30387:1)
    at recoverFromConcurrentError (react-dom.development.js?f14d:29776:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?f14d:29675:1)
    at workLoop (index.js?a586:10:3922)
    at flushWork (index.js?a586:10:3630)
  ```
</details>

The issue only occurs when `strategy` is set to `beforeInteractive`.

It occurs for both inline scripts and third party scripts (added via `src`).

### Expected Behavior

Should work without throwing errors

### Link to reproduction

https://github.com/ryanpwaldon/next13-repro

### To Reproduce

Run `next dev`, check browser console