A computer once beat me at chess, but it was no match for me at kick boxing. -- Emo Philips

beforeInteractive

Used for critical scripts. This strategy only works inside _document.js and is designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).

Scripts using this strategy should be placed inside `_document.js`. If placed in a component, the timing and ordering of the script loading is not guaranteed

Scripts that you would normally load in the head should use beforeInteractive, such as Polyfills, device detecting script.

Sample Code

import Script from 'next/script';


<Html>
  <Head />
  <body>
    <Main />
    <NextScript />
    <Script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
      strategy="beforeInteractive"
    ></Script>
  </body>
  </Html>