Add data attribute to script component #28310

janicklas-ralph · 2021-08-19T21:29:26Z

Add data attribute data-nscript to the script component

styfle · 2021-08-19T21:34:36Z

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"


Should this be data-nscript={strategy}?

Also, this doesn't seem right since its not using next/script here

For beforeInteractive we pass the data via context so we can render it during SSR. Only beforeInteractive scripts are rendered here

ijjk · 2021-08-20T20:21:57Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	15.4s	15.6s	⚠️ +188ms
buildDurationCached	4s	3.9s	-66ms
nodeModulesSize	61.5 MB	61.5 MB	⚠️ +343 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.772	2.796	⚠️ +0.02
/ avg req/sec	901.87	894.1	⚠️ -7.77
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.53	1.504	-0.03
/error-in-render avg req/sec	1634.32	1662.53	+28.21

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.2 kB	23.3 kB	⚠️ +30 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	67.1 kB	67.1 kB	⚠️ +30 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	979 B	979 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.14 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	318 B	318 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	491 B	491 B	✓
Overall change	491 B	491 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	541 B	539 B	-2 B
link.html gzip	553 B	552 B	-1 B
withRouter.html gzip	534 B	534 B	✓
Overall change	1.63 kB	1.63 kB	-3 B

Diffs

Diff for main-HASH.js

@@ -3310,6 +3310,9 @@
           dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
           _props$children = props.children,
           children = _props$children === void 0 ? "" : _props$children,
+          _props$strategy = props.strategy,
+          strategy =
+            _props$strategy === void 0 ? "afterInteractive" : _props$strategy,
           onError = props.onError;
         var cacheKey = id || src; // Script has already loaded
 
@@ -3378,13 +3381,14 @@
           el.setAttribute(attr, value);
         }
 
+        el.setAttribute("data-nscript", strategy);
         document.body.appendChild(el);
       };
 
       function handleClientScriptLoad(props) {
-        var _props$strategy = props.strategy,
+        var _props$strategy2 = props.strategy,
           strategy =
-            _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2;
 
         if (strategy === "afterInteractive") {
           loadScript(props);
@@ -3421,9 +3425,9 @@
           _props$onLoad2 = props.onLoad,
           onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
           dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
-          _props$strategy2 = props.strategy,
+          _props$strategy3 = props.strategy,
           strategy =
-            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+            _props$strategy3 === void 0 ? "afterInteractive" : _props$strategy3,
           onError = props.onError,
           restProps = _objectWithoutProperties(props, [
             "src",

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-bd462c6df0747808c1c8.js"
+      src="/_next/static/chunks/main-b5c78ac8f0fc7ceb7532.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-bd462c6df0747808c1c8.js"
+      src="/_next/static/chunks/main-b5c78ac8f0fc7ceb7532.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-bd462c6df0747808c1c8.js"
+      src="/_next/static/chunks/main-b5c78ac8f0fc7ceb7532.js"
       defer=""
     ></script>
     <script

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	13s	13s	⚠️ +36ms
buildDurationCached	5.5s	5.4s	-42ms
nodeModulesSize	61.5 MB	61.5 MB	⚠️ +343 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.815	2.785	-0.03
/ avg req/sec	888.09	897.62	+9.53
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.545	1.561	⚠️ +0.02
/error-in-render avg req/sec	1617.9	1601.19	⚠️ -16.71

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
16.HASH.js gzip	186 B	186 B	✓
677f882d2ed8..HASH.js gzip	14.1 kB	14.1 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	⚠️ +31 B
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	68 kB	68 kB	⚠️ +31 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	964 B	964 B	✓
_error-HASH.js gzip	3.8 kB	3.8 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.87 kB	2.87 kB	✓
head-HASH.js gzip	3.06 kB	3.06 kB	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.98 kB	3 kB	⚠️ +27 B
withRouter-HASH.js gzip	295 B	295 B	✓
30809af5c834..565.css gzip	125 B	125 B	✓
Overall change	18.1 kB	18.1 kB	⚠️ +27 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	500 B	501 B	⚠️ +1 B
Overall change	500 B	501 B	⚠️ +1 B

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	585 B	586 B	⚠️ +1 B
link.html gzip	597 B	597 B	✓
withRouter.html gzip	577 B	578 B	⚠️ +1 B
Overall change	1.76 kB	1.76 kB	⚠️ +2 B

Diffs

Diff for _buildManifest.js

@@ -21,7 +21,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-50fd45536deb174654c1.js"
   ],
   "/script": [
-    "static\u002Fchunks\u002Fpages\u002Fscript-afc4b3ab6b4763aff619.js"
+    "static\u002Fchunks\u002Fpages\u002Fscript-6d080d3c0355db6a774e.js"
   ],
   "/withRouter": [
     "static\u002Fchunks\u002Fpages\u002FwithRouter-0fffa173b4934d0b86a2.js"

Diff for script-HASH.js

@@ -150,6 +150,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
           _props$children = props.children,
           children = _props$children === void 0 ? "" : _props$children,
+          _props$strategy = props.strategy,
+          strategy =
+            _props$strategy === void 0 ? "afterInteractive" : _props$strategy,
           onError = props.onError;
         var cacheKey = id || src; // Script has already loaded
 
@@ -218,13 +221,14 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           el.setAttribute(attr, value);
         }
 
+        el.setAttribute("data-nscript", strategy);
         document.body.appendChild(el);
       };
 
       function handleClientScriptLoad(props) {
-        var _props$strategy = props.strategy,
+        var _props$strategy2 = props.strategy,
           strategy =
-            _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2;
 
         if (strategy === "afterInteractive") {
           loadScript(props);
@@ -261,9 +265,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           _props$onLoad2 = props.onLoad,
           onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
           dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
-          _props$strategy2 = props.strategy,
+          _props$strategy3 = props.strategy,
           strategy =
-            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+            _props$strategy3 === void 0 ? "afterInteractive" : _props$strategy3,
           onError = props.onError,
           restProps = _objectWithoutProperties(props, [
             "src",

Diff for main-HASH.js

@@ -732,6 +732,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
           _props$children = props.children,
           children = _props$children === void 0 ? "" : _props$children,
+          _props$strategy = props.strategy,
+          strategy =
+            _props$strategy === void 0 ? "afterInteractive" : _props$strategy,
           onError = props.onError;
         var cacheKey = id || src; // Script has already loaded
 
@@ -800,13 +803,14 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           el.setAttribute(attr, value);
         }
 
+        el.setAttribute("data-nscript", strategy);
         document.body.appendChild(el);
       };
 
       function handleClientScriptLoad(props) {
-        var _props$strategy = props.strategy,
+        var _props$strategy2 = props.strategy,
           strategy =
-            _props$strategy === void 0 ? "afterInteractive" : _props$strategy;
+            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2;
 
         if (strategy === "afterInteractive") {
           loadScript(props);
@@ -843,9 +847,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           _props$onLoad2 = props.onLoad,
           onLoad = _props$onLoad2 === void 0 ? function() {} : _props$onLoad2,
           dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
-          _props$strategy2 = props.strategy,
+          _props$strategy3 = props.strategy,
           strategy =
-            _props$strategy2 === void 0 ? "afterInteractive" : _props$strategy2,
+            _props$strategy3 === void 0 ? "afterInteractive" : _props$strategy3,
           onError = props.onError,
           restProps = _objectWithoutProperties(props, [
             "src",

Diff for index.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-b50bc000da2f86b7e127.js"
+      src="/_next/static/chunks/main-3f75f764e2ebb3fc8ab5.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-b50bc000da2f86b7e127.js"
+      src="/_next/static/chunks/main-3f75f764e2ebb3fc8ab5.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-b50bc000da2f86b7e127.js"
+      src="/_next/static/chunks/main-3f75f764e2ebb3fc8ab5.js"
       defer=""
     ></script>
     <script

Commit: 4e1f75e

janicklas-ralph added 5 commits August 9, 2021 15:19

Fix vercel#27747

5491d12

Fix lint error

0e5fab1

Merge branch 'canary' of github.com:vercel/next.js into script

1c77210

Merge branch 'canary' of github.com:vercel/next.js into script

11c14e4

Add data attribute to script component

7924509

janicklas-ralph requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners August 19, 2021 21:29

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Aug 19, 2021

Merge branch 'canary' of github.com:vercel/next.js into script

9218a66

styfle reviewed Aug 19, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

styfle approved these changes Aug 20, 2021

View reviewed changes

Merge branch 'canary' into script

4e1f75e

ijjk approved these changes Aug 20, 2021

View reviewed changes

kodiakhq bot merged commit 26255a6 into vercel:canary Aug 20, 2021

sync-by-unito bot mentioned this pull request Sep 1, 2021

chore(deps): bump next from 11.1.0 to 11.1.1 filecoin-project/slate#916

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add data attribute to script component #28310

Add data attribute to script component #28310

janicklas-ralph commented Aug 19, 2021

styfle Aug 19, 2021

styfle Aug 19, 2021

janicklas-ralph Aug 19, 2021

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 20, 2021

Diffs

Diffs

Add data attribute to script component #28310

Add data attribute to script component #28310

Conversation

janicklas-ralph commented Aug 19, 2021

styfle Aug 19, 2021

Choose a reason for hiding this comment

styfle Aug 19, 2021

Choose a reason for hiding this comment

janicklas-ralph Aug 19, 2021

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 20, 2021

Stats from current PR

Diffs

Diffs