Encapsulate routing and initial hydration #33875

devknoll · 2022-02-01T17:19:20Z

I'm working on addressing the issue in #33861. The appropriate fix is to ensure we only change the router when the route changes. To achieve that, I'm starting by cleaning up how a route is rendered and initially hydrated.

A follow-up PR will make it so that the initial RenderRouteInfo is created and set via the router callback, rather than by next/client/index.tsx directly.

ijjk · 2022-02-01T19:31:03Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
buildDuration	12.2s	12.2s	⚠️ +39ms
buildDurationCached	3.1s	3.1s	⚠️ +5ms
nodeModulesSize	359 MB	359 MB	-602 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.757	2.729	-0.03
/ avg req/sec	906.91	916.02	+9.11
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.185	1.185	✓
/error-in-render avg req/sec	2110.02	2109.94	⚠️ -0.08

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	-1 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71 kB	71 kB	-1 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.94 kB	4.94 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.4 kB	14.4 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
index.html gzip	530 B	530 B	✓
link.html gzip	543 B	545 B	⚠️ +2 B
withRouter.html gzip	525 B	526 B	⚠️ +1 B
Overall change	1.6 kB	1.6 kB	⚠️ +3 B

Diffs

Diff for main-HASH.js

@@ -980,16 +980,15 @@
                         props: hydrateProps,
                         err: initialErr
                       };
-                      if (false) {
+                      if (!opts.beforeRender) {
+                        _ctx.next = 42;
+                        break;
                       }
+                      _ctx.next = 42;
+                      return opts.beforeRender();
+                    case 42:
                       render(renderCtx);
-                      return _ctx.abrupt("return", emitter);
-                    case 44:
-                      return _ctx.abrupt("return", {
-                        emitter: emitter,
-                        renderCtx: renderCtx
-                      });
-                    case 45:
+                    case 43:
                     case "end":
                       return _ctx.stop();
                   }

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Default Build with SWC (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
buildDuration	16.2s	15.7s	-511ms
buildDurationCached	3.1s	3.1s	⚠️ +44ms
nodeModulesSize	359 MB	359 MB	-602 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.748	2.788	⚠️ +0.04
/ avg req/sec	909.68	896.83	⚠️ -12.85
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.206	1.183	-0.02
/error-in-render avg req/sec	2073.77	2112.8	+39.03

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.3 kB	27.3 kB	-3 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.3 kB	71.3 kB	-3 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	4.98 kB	4.98 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.21 kB	2.21 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.3 kB	14.3 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-clean-client-init	Change
index.html gzip	530 B	530 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	525 B	524 B	-1 B
Overall change	1.6 kB	1.6 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -980,16 +980,15 @@
                         props: hydrateProps,
                         err: initialErr
                       };
-                      if (false) {
+                      if (!opts.beforeRender) {
+                        _ctx.next = 42;
+                        break;
                       }
+                      _ctx.next = 42;
+                      return opts.beforeRender();
+                    case 42:
                       render(renderCtx);
-                      return _ctx.abrupt("return", emitter);
-                    case 44:
-                      return _ctx.abrupt("return", {
-                        emitter: emitter,
-                        renderCtx: renderCtx
-                      });
-                    case 45:
+                    case 43:
                     case "end":
                       return _ctx.stop();
                   }

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 1b7d71a

devknoll · 2022-02-01T22:08:51Z

Ping @huozhi @shuding

* Encapsulate initial rendering * Run dev code before rendering * Fix call * Try reverting last change, fixing call

Encapsulate initial rendering

e847c1b

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Feb 1, 2022

This comment has been minimized.

Sign in to view

devknoll added 3 commits February 1, 2022 17:29

Run dev code before rendering

7491002

Fix call

61b64b9

Try reverting last change, fixing call

c01ad72

This comment has been minimized.

Sign in to view

Merge branch 'canary' into x-clean-client-init

c08c7ac

This comment has been minimized.

Sign in to view

Merge branch 'canary' into x-clean-client-init

1b7d71a

devknoll marked this pull request as ready for review February 1, 2022 19:15

devknoll requested review from huozhi, ijjk, shuding and timneutkens as code owners February 1, 2022 19:15

gaearon mentioned this pull request Feb 2, 2022

Fix top-level router update forcing Suspense client fallbacks #33861

Closed

shuding approved these changes Feb 2, 2022

View reviewed changes

huozhi approved these changes Feb 2, 2022

View reviewed changes

ijjk approved these changes Feb 2, 2022

View reviewed changes

ijjk merged commit 0fa95da into vercel:canary Feb 2, 2022

natew pushed a commit to natew/next.js that referenced this pull request Feb 16, 2022

Encapsulate routing and initial hydration (vercel#33875)

d35bb9b

* Encapsulate initial rendering * Run dev code before rendering * Fix call * Try reverting last change, fixing call

github-actions bot locked as resolved and limited conversation to collaborators Mar 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Encapsulate routing and initial hydration #33875

Encapsulate routing and initial hydration #33875

devknoll commented Feb 1, 2022 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 1, 2022

Diffs

Diffs

devknoll commented Feb 1, 2022

Encapsulate routing and initial hydration #33875

Encapsulate routing and initial hydration #33875

Conversation

devknoll commented Feb 1, 2022 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 1, 2022

Stats from current PR

Diffs

Diffs

devknoll commented Feb 1, 2022

devknoll commented Feb 1, 2022 •

edited