Use next/script to help load 3P scripts

aws-amplify · Dec 7, 2023 · 2bbc329 · 2bbc329
1 parent 390d61e
commit 2bbc329
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import '@aws-amplify/ui-react/styles.css';
 import '../styles/styles.scss';
 import Head from 'next/head';
+import Script from 'next/script';
 import { MDXProvider } from '@mdx-js/react';
 import { Layout } from '@/components/Layout';
 import { CANONICAL_URLS } from '@/data/canonical-urls';
@@ -178,23 +179,33 @@ function MyApp({ Component, pageProps }) {
 
       <MDXProvider>{getLayout(<Component {...pageProps} />)}</MDXProvider>
 
+      <Script
+        src="https://prod.assets.shortbread.aws.dev/shortbread.js"
+        strategy="afterInteractive"
+      ></Script>
       {process.env.BUILD_ENV !== 'production' ? (
         <>
           {/* eslint-disable-next-line @next/next/no-sync-scripts */}
-          <script src="https://aa0.awsstatic.com/s_code/js/3.0/awshome_s_code.js"></script>
-          <script
+          <Script
+            src="https://aa0.awsstatic.com/s_code/js/3.0/awshome_s_code.js"
+            strategy="beforeInteractive"
+          ></Script>
+          <Script
             src="https://alpha.d2c.marketing.aws.dev/client/loader/v1/d2c-load.js"
-            defer
-          ></script>
+            strategy="afterInteractive"
+          ></Script>
         </>
       ) : (
         <>
           {/* eslint-disable-next-line @next/next/no-sync-scripts */}
-          <script src="https://a0.awsstatic.com/s_code/js/3.0/awshome_s_code.js"></script>
-          <script
+          <Script
+            src="https://a0.awsstatic.com/s_code/js/3.0/awshome_s_code.js"
+            strategy="beforeInteractive"
+          ></Script>
+          <Script
             src="https://d2c.aws.amazon.com/client/loader/v1/d2c-load.js"
-            defer
-          ></script>
+            strategy="afterInteractive"
+          ></Script>
         </>
       )}
       <link

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -114,10 +114,6 @@ export default class MyDocument extends Document {
             httpEquiv="Content-Security-Policy"
             content={getCspContent(this.props)}
           />
-          <script
-            src="https://prod.assets.shortbread.aws.dev/shortbread.js"
-            defer
-          ></script>
         </Head>
         <body>
           <Main />