Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(next/head): assign bool attrs to match server #20748

Merged
merged 2 commits into from
Jan 4, 2021
Merged

fix(next/head): assign bool attrs to match server #20748

merged 2 commits into from
Jan 4, 2021

Conversation

Timer
Copy link
Member

@Timer Timer commented Jan 4, 2021

This pull request correctly assigns boolean attributes for <script /> to match the element as it is created by a server-side render.

Prior to this pull request, we'd double-execute <script> tags with the async, defer, or nomodule property.

Fixes #9070

@Timer
fix(next/head): assign bool attrs to match server
b44f4e6 
This pull request correctly assigns boolean attributes for `<script />` to match the element as it is created by a server-side render.

Prior to this pull request, we'd double-execute `<script>` tags with the `async`, `defer`, or `nomodule` property.

---

Fixes vercel#9070
@ijjk ijjk added the type: next label Jan 4, 2021
@ijjk
Copy link
Member

ijjk commented Jan 4, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
buildDuration 8.7s 8.9s ⚠️ +143ms
nodeModulesSize 80.6 MB 80.6 MB ⚠️ +577 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.739 1.753 ⚠️ +0.01
/ avg req/sec 1437.69 1426.26 ⚠️ -11.43
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.068 1.08 ⚠️ +0.01
/error-in-render avg req/sec 2339.94 2315.77 ⚠️ -24.17
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
677f882d2ed8..396f.js gzip 13 kB 13 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-fd59cc5..1b57.js gzip 6.59 kB 6.63 kB ⚠️ +37 B
webpack-50be..df5b.js gzip 751 B 751 B ✓
Overall change 59.3 kB 59.3 kB ⚠️ +37 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
polyfills-81..14d7.js gzip 31.2 kB 31.2 kB ✓
Overall change 31.2 kB 31.2 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_app-b6fc6bc..222c.js gzip 1.28 kB 1.28 kB ✓
_error-e2ffa..0f3f.js gzip 3.46 kB 3.46 kB ✓
hooks-010c20..8411.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-705099c..c35d.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_buildManifest.js gzip 323 B 323 B ✓
Overall change 323 B 323 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
index.html gzip 613 B 615 B ⚠️ +2 B
link.html gzip 619 B 620 B ⚠️ +1 B
withRouter.html gzip 607 B 608 B ⚠️ +1 B
Overall change 1.84 kB 1.84 kB ⚠️ +4 B

Diffs

Diff for main-c812617..62dbb6f36.js 
@@ -93,7 +93,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         acceptCharset: "accept-charset",
         className: "class",
         htmlFor: "for",
-        httpEquiv: "http-equiv"
+        httpEquiv: "http-equiv",
+        noModule: "noModule"
       };
       exports.DOMAttributeNames = DOMAttributeNames;
 
@@ -108,7 +109,15 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
           if (props[p] === undefined) continue;
           var attr = DOMAttributeNames[p] || p.toLowerCase();
-          el.setAttribute(attr, props[p]);
+
+          if (
+            type === "script" &&
+            (attr === "async" || attr === "defer" || attr === "noModule")
+          ) {
+            el[attr] = !!props[p];
+          } else {
+            el.setAttribute(attr, props[p]);
+          }
         }
 
         var children = props.children,
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      href="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      src="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      href="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      src="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      href="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      src="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
buildDuration 10.7s 10.5s -203ms
nodeModulesSize 80.6 MB 80.6 MB ⚠️ +577 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
677f882d2ed8..396f.js gzip 13 kB 13 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-fd59cc5..1b57.js gzip 6.59 kB N/A N/A
webpack-50be..df5b.js gzip 751 B 751 B ✓
main-6b712d3..3360.js gzip N/A 6.63 kB N/A
Overall change 59.3 kB 59.3 kB ⚠️ +37 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
polyfills-81..14d7.js gzip 31.2 kB 31.2 kB ✓
Overall change 31.2 kB 31.2 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_app-b6fc6bc..222c.js gzip 1.28 kB 1.28 kB ✓
_error-e2ffa..0f3f.js gzip 3.46 kB 3.46 kB ✓
hooks-010c20..8411.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-705099c..c35d.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_buildManifest.js gzip 323 B 323 B ✓
Overall change 323 B 323 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_error.js 1 MB 1 MB ✓
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.17 MB 5.17 MB ✓
Commit: b44f4e6

@ijjk
Copy link
Member

ijjk commented Jan 4, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
buildDuration 10.2s 10.2s ⚠️ +19ms
nodeModulesSize 80.6 MB 80.6 MB ⚠️ +577 B
Page Load Tests Overall increase ✓
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.039 2.024 -0.02
/ avg req/sec 1225.83 1235.48 +9.65
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.276 1.212 -0.06
/error-in-render avg req/sec 1958.58 2062.77 +104.19
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
677f882d2ed8..396f.js gzip 13 kB 13 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-fd59cc5..1b57.js gzip 6.59 kB 6.63 kB ⚠️ +37 B
webpack-50be..df5b.js gzip 751 B 751 B ✓
Overall change 59.3 kB 59.3 kB ⚠️ +37 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
polyfills-81..14d7.js gzip 31.2 kB 31.2 kB ✓
Overall change 31.2 kB 31.2 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_app-b6fc6bc..222c.js gzip 1.28 kB 1.28 kB ✓
_error-e2ffa..0f3f.js gzip 3.46 kB 3.46 kB ✓
hooks-010c20..8411.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-705099c..c35d.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_buildManifest.js gzip 323 B 323 B ✓
Overall change 323 B 323 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
index.html gzip 613 B 615 B ⚠️ +2 B
link.html gzip 619 B 620 B ⚠️ +1 B
withRouter.html gzip 607 B 608 B ⚠️ +1 B
Overall change 1.84 kB 1.84 kB ⚠️ +4 B

Diffs

Diff for main-c812617..62dbb6f36.js 
@@ -93,7 +93,8 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         acceptCharset: "accept-charset",
         className: "class",
         htmlFor: "for",
-        httpEquiv: "http-equiv"
+        httpEquiv: "http-equiv",
+        noModule: "noModule"
       };
       exports.DOMAttributeNames = DOMAttributeNames;
 
@@ -108,7 +109,15 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
           if (props[p] === undefined) continue;
           var attr = DOMAttributeNames[p] || p.toLowerCase();
-          el.setAttribute(attr, props[p]);
+
+          if (
+            type === "script" &&
+            (attr === "async" || attr === "defer" || attr === "noModule")
+          ) {
+            el[attr] = !!props[p];
+          } else {
+            el.setAttribute(attr, props[p]);
+          }
         }
 
         var children = props.children,
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      href="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      src="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      href="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      src="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      href="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-ae47a1f95297af5f55f8.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-c812617d01862dbb6f36.js"
+      src="/_next/static/chunks/main-c371cf8cfc0efe26c758.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
buildDuration 12.7s 12.5s -214ms
nodeModulesSize 80.6 MB 80.6 MB ⚠️ +577 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
677f882d2ed8..396f.js gzip 13 kB 13 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-fd59cc5..1b57.js gzip 6.59 kB N/A N/A
webpack-50be..df5b.js gzip 751 B 751 B ✓
main-6b712d3..3360.js gzip N/A 6.63 kB N/A
Overall change 59.3 kB 59.3 kB ⚠️ +37 B
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
polyfills-81..14d7.js gzip 31.2 kB 31.2 kB ✓
Overall change 31.2 kB 31.2 kB ✓
Client Pages
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_app-b6fc6bc..222c.js gzip 1.28 kB 1.28 kB ✓
_error-e2ffa..0f3f.js gzip 3.46 kB 3.46 kB ✓
hooks-010c20..8411.js gzip 887 B 887 B ✓
index-bbee2f..528b.js gzip 227 B 227 B ✓
link-705099c..c35d.js gzip 1.64 kB 1.64 kB ✓
routerDirect..bf84.js gzip 303 B 303 B ✓
withRouter-a..5826.js gzip 302 B 302 B ✓
Overall change 8.09 kB 8.09 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_buildManifest.js gzip 323 B 323 B ✓
Overall change 323 B 323 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js hotfix/boolean-attributes Change
_error.js 1 MB 1 MB ✓
404.html 2.67 kB 2.67 kB ✓
hooks.html 1.92 kB 1.92 kB ✓
index.js 1 MB 1 MB ✓
link.js 1.06 MB 1.06 MB ✓
routerDirect.js 1.05 MB 1.05 MB ✓
withRouter.js 1.05 MB 1.05 MB ✓
Overall change 5.17 MB 5.17 MB ✓
Commit: f728c09

@kodiakhq kodiakhq bot merged commit cb50b04 into vercel:canary Jan 4, 2021
@Timer Timer deleted the hotfix/boolean-attributes branch January 4, 2021 20:05
@alexandermendes alexandermendes mentioned this pull request Jan 4, 2021
Closed
@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk ijjk approved these changes

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Scripts with async in Head are executed twice
2 participants
@Timer @ijjk