Script with "beforeInteractive" strategy and innerHTML rendered incorrectly.

[lxsmnsyc]

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

15.4.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

Scripts with "beforeInteractive" strategy and dangerouslySetInnerHTML or inlined script incorrectly renders scripts in SSR.

Code:

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Script from 'next/script'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script strategy="beforeInteractive">
        {'console.log("DYNAMIC INLINE SCRIPT RENDERED");'}
      </Script>
      <Script
        strategy="beforeInteractive"
        dangerouslySetInnerHTML={{ __html: 'console.log("dangerouslySetInnerHTML SCRIPT RENDERED");' }}
      />
    </>
  )
}

export default MyApp

Output (notice the src(unknown)

Codesandbox: https://codesandbox.io/s/github/LXSMNSYC/next-script-beforeinteractive-repro

Expected Behavior

It should correctly render the scripts on server-side.

To Reproduce

Reproduction mentioned and linked above

[devanshj]

Probably it's because of facebook/react#13838

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.