From 26255a685d99bed85e2ba89151187627f6a8268f Mon Sep 17 00:00:00 2001
From: Janicklas Ralph <janicklas@google.com>
Date: Fri, 20 Aug 2021 13:48:48 -0700
Subject: [PATCH] Add data attribute to script component (#28310)

Add data attribute `data-nscript` to the script component
---
 packages/next/client/script.tsx                   | 3 +++
 packages/next/pages/_document.tsx                 | 1 +
 test/integration/script-loader/test/index.test.js | 7 +++++++
 3 files changed, 11 insertions(+)

diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
index 782925de8c0cdca..bd26a8b85733705 100644
--- a/packages/next/client/script.tsx
+++ b/packages/next/client/script.tsx
@@ -35,6 +35,7 @@ const loadScript = (props: ScriptProps): void => {
     onLoad = () => {},
     dangerouslySetInnerHTML,
     children = '',
+    strategy = 'afterInteractive',
     onError,
   } = props
 
@@ -98,6 +99,8 @@ const loadScript = (props: ScriptProps): void => {
     el.setAttribute(attr, value)
   }
 
+  el.setAttribute('data-nscript', strategy)
+
   document.body.appendChild(el)
 }
 
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 5a24224197ede31..cdb4095cee8f593 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -84,6 +84,7 @@ function getPreNextScripts(context: HtmlProps, props: OriginProps) {
           key={scriptProps.src || index}
           defer={!disableOptimizedLoading}
           nonce={props.nonce}
+          data-nscript="beforeInteractive"
           crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
         />
       )
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
index 3d37f1612acdc8c..52c4b26dd8136ff 100644
--- a/test/integration/script-loader/test/index.test.js
+++ b/test/integration/script-loader/test/index.test.js
@@ -42,12 +42,15 @@ describe('Script Loader', () => {
 
       async function test(id) {
         const script = await browser.elementById(id)
+        const dataAttr = await script.getAttribute('data-nscript')
         const endScripts = await browser.elementsByCss(
           `#__NEXT_DATA__ ~ #${id}`
         )
 
         // Renders script tag
         expect(script).toBeDefined()
+        expect(dataAttr).toBeDefined()
+
         // Script is inserted at the end
         expect(endScripts.length).toBe(1)
       }
@@ -77,12 +80,15 @@ describe('Script Loader', () => {
 
       async function test(id) {
         const script = await browser.elementById(id)
+        const dataAttr = await script.getAttribute('data-nscript')
         const endScripts = await browser.elementsByCss(
           `#__NEXT_DATA__ ~ #${id}`
         )
 
         // Renders script tag
         expect(script).toBeDefined()
+        expect(dataAttr).toBeDefined()
+
         // Script is inserted at the end
         expect(endScripts.length).toBe(1)
       }
@@ -105,6 +111,7 @@ describe('Script Loader', () => {
 
       // Renders script tag
       expect(script.length).toBe(1)
+      expect(script.attr('data-nscript')).toBeDefined()
 
       // Script is inserted before NextScripts
       expect(