Ensure component load order #22731

ijjk · 2021-03-03T17:46:38Z

This ensures we load _document then _app and then the page's component in all cases which matches behavior between the serverless target and the default server target. Additional tests to ensure this order is followed has been added to prevent regression.

Fixes: #22732

ijjk · 2021-03-03T19:09:09Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
buildDuration	12.4s	12.3s	-62ms
nodeModulesSize	42.7 MB	42.7 MB	⚠️ +1.19 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.302	2.248	-0.05
/ avg req/sec	1085.79	1111.91	+26.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.618	1.519	-0.1
/error-in-render avg req/sec	1545.22	1646.34	+101.12

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
677f882d2ed8..e7a0.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.65 kB	6.65 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.7 kB	59.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
amp-e3e9bc99..932c.js gzip	536 B	536 B	✓
hooks-5023ef..3670.js gzip	888 B	888 B	✓
index-3a2b03..c677.js gzip	227 B	227 B	✓
link-177412b..043e.js gzip	1.67 kB	1.67 kB	✓
routerDirect..1a66.js gzip	303 B	303 B	✓
withRouter-9..1b7d.js gzip	302 B	302 B	✓
Overall change	8.66 kB	8.66 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
_buildManifest.js gzip	347 B	347 B	✓
Overall change	347 B	347 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
buildDuration	13.6s	13.7s	⚠️ +138ms
nodeModulesSize	42.7 MB	42.7 MB	⚠️ +1.19 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
677f882d2ed8..e7a0.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.65 kB	6.65 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.7 kB	59.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
amp-e3e9bc99..932c.js gzip	536 B	536 B	✓
hooks-5023ef..3670.js gzip	888 B	888 B	✓
index-3a2b03..c677.js gzip	227 B	227 B	✓
link-177412b..043e.js gzip	1.67 kB	1.67 kB	✓
routerDirect..1a66.js gzip	303 B	303 B	✓
withRouter-9..1b7d.js gzip	302 B	302 B	✓
Overall change	8.66 kB	8.66 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
_buildManifest.js gzip	347 B	347 B	✓
Overall change	347 B	347 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
_error.js	1.02 MB	1.02 MB	⚠️ +86 B
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.4 kB	10.4 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.02 MB	1.02 MB	⚠️ +86 B
link.js	1.08 MB	1.08 MB	⚠️ +86 B
routerDirect.js	1.07 MB	1.07 MB	⚠️ +86 B
withRouter.js	1.07 MB	1.07 MB	⚠️ +86 B
Overall change	5.27 MB	5.27 MB	⚠️ +430 B

Webpack 5 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
buildDuration	14.8s	14.5s	-246ms
nodeModulesSize	42.7 MB	42.7 MB	⚠️ +1.19 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.309	2.188	-0.12
/ avg req/sec	1082.57	1142.51	+59.94
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.586	1.517	-0.07
/error-in-render avg req/sec	1576.02	1648.28	+72.26

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
597-74632e79..1d47.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	6.6 kB	6.6 kB	✓
webpack-HASH.js gzip	954 B	954 B	✓
Overall change	60.1 kB	60.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
_app-aedc815..1421.js gzip	1.26 kB	1.26 kB	✓
_error-71ec2..1a96.js gzip	3.38 kB	3.38 kB	✓
amp-33a09cb0..6745.js gzip	536 B	536 B	✓
hooks-4e968a..f870.js gzip	902 B	902 B	✓
index-5c6845..f75c.js gzip	230 B	230 B	✓
link-99f0c6c..b84a.js gzip	1.65 kB	1.65 kB	✓
routerDirect..bb56.js gzip	306 B	306 B	✓
withRouter-7..2133.js gzip	302 B	302 B	✓
Overall change	8.57 kB	8.57 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
_buildManifest.js gzip	326 B	326 B	✓
Overall change	326 B	326 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js update/load-components-order	Change
index.html gzip	586 B	586 B	✓
link.html gzip	593 B	593 B	✓
withRouter.html gzip	581 B	581 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "_ZFSMsQQ1BT0nv99fAU-r",
+        "buildId": "Lt80OL4OOqT-_bLZhaTDN",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/_ZFSMsQQ1BT0nv99fAU-r/_buildManifest.js"
+      src="/_next/static/Lt80OL4OOqT-_bLZhaTDN/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/_ZFSMsQQ1BT0nv99fAU-r/_ssgManifest.js"
+      src="/_next/static/Lt80OL4OOqT-_bLZhaTDN/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for link.html

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "_ZFSMsQQ1BT0nv99fAU-r",
+        "buildId": "Lt80OL4OOqT-_bLZhaTDN",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/_ZFSMsQQ1BT0nv99fAU-r/_buildManifest.js"
+      src="/_next/static/Lt80OL4OOqT-_bLZhaTDN/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/_ZFSMsQQ1BT0nv99fAU-r/_ssgManifest.js"
+      src="/_next/static/Lt80OL4OOqT-_bLZhaTDN/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for withRouter.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "_ZFSMsQQ1BT0nv99fAU-r",
+        "buildId": "Lt80OL4OOqT-_bLZhaTDN",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/_ZFSMsQQ1BT0nv99fAU-r/_buildManifest.js"
+      src="/_next/static/Lt80OL4OOqT-_bLZhaTDN/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/_ZFSMsQQ1BT0nv99fAU-r/_ssgManifest.js"
+      src="/_next/static/Lt80OL4OOqT-_bLZhaTDN/_ssgManifest.js"
       async=""
     ></script>
   </body>

Commit: c2d8483

ijjk added 2 commits March 3, 2021 11:46

Ensure component load order

394d7a3

Update type

fdbcc0e

This comment has been minimized.

Sign in to view

Update serverless load

2adf775

This comment has been minimized.

Sign in to view

ijjk added 2 commits March 3, 2021 12:29

Update test

b7e794a

update order in assertion name

e15db11

This comment has been minimized.

Sign in to view

Update order in serverless target instead

c2d8483

ijjk marked this pull request as ready for review March 3, 2021 19:00

ijjk requested review from divmain, lfades, Timer and timneutkens as code owners March 3, 2021 19:00

Timer approved these changes Mar 3, 2021

View reviewed changes

ijjk added the type: next label Mar 3, 2021

kodiakhq bot merged commit 1435de1 into vercel:canary Mar 3, 2021

Timer deleted the update/load-components-order branch March 3, 2021 19:28

This was referenced Mar 15, 2021

Bump next from 9.5.3 to 10.0.8 Jam52/dddem-web#2

Closed

Bump next from 10.0.6 to 10.0.8 Danrrodrigues/boilerplate-react-next#228

Closed

ofhouse mentioned this pull request Mar 19, 2021

Allow dependencies to detect the build environment milliHQ/terraform-aws-next-js#85

Merged

ofhouse mentioned this pull request Mar 27, 2021

Runtime: Use server target milliHQ/terraform-aws-next-js#86

Open

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

Ensure component load order #22731

Ensure component load order #22731

ijjk commented Mar 3, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Mar 3, 2021

Diffs

Ensure component load order #22731

Ensure component load order #22731

Conversation

ijjk commented Mar 3, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Mar 3, 2021

Stats from current PR

Diffs

ijjk commented Mar 3, 2021 •

edited

Loading