Add isReady field on router #20628

ijjk · 2020-12-31T03:29:29Z

Adds an isReady field on next/router specifying whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server.

Closes: #8259
Closes: #9370

ijjk · 2020-12-31T04:49:23Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
buildDuration	8.8s	8.8s	⚠️ +90ms
nodeModulesSize	83 MB	83 MB	⚠️ +1.48 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.786	1.722	-0.06
/ avg req/sec	1399.79	1451.98	+52.19
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.139	1.081	-0.06
/error-in-render avg req/sec	2195.22	2313.27	+118.05

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

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
677f882d2ed8..6cec.js gzip	12.8 kB	12.8 kB	⚠️ +44 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-b45d971..6435.js gzip	6.59 kB	6.59 kB	✓
webpack-7193..1446.js gzip	751 B	751 B	✓
Overall change	59.1 kB	59.2 kB	⚠️ +44 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
polyfills-67..b7d1.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_app-6220e08..9a40.js gzip	1.28 kB	1.28 kB	✓
_error-4b0b5..2c91.js gzip	3.44 kB	3.44 kB	✓
hooks-5f309a..7282.js gzip	887 B	887 B	✓
index-57f580..c562.js gzip	227 B	227 B	✓
link-1a1f628..eeb5.js gzip	1.61 kB	1.61 kB	✓
routerDirect..bd82.js gzip	303 B	303 B	✓
withRouter-2..e384.js gzip	302 B	302 B	✓
Overall change	8.05 kB	8.05 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_buildManifest.js gzip	322 B	322 B	✓
Overall change	322 B	322 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
index.html gzip	617 B	616 B	-1 B
link.html gzip	622 B	621 B	-1 B
withRouter.html gzip	610 B	609 B	-1 B
Overall change	1.85 kB	1.85 kB	-3 B

Diffs

Diff for 677f882d2ed8..74301f1c8.js

@@ -1549,6 +1549,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this.locales = void 0;
           this.defaultLocale = void 0;
           this.domainLocales = void 0;
+          this.isReady = void 0;
 
           this.onPopState = function(e) {
             var state = e.state;
@@ -1647,9 +1648,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this.query = _query; // if auto prerendered and dynamic route wait to update asPath
           // until after mount to prevent hydration mismatch
 
-          this.asPath = // @ts-ignore this is temporarily global (attached to window)
+          this.asPath =
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
-            __NEXT_DATA__.autoExport
+            self.__NEXT_DATA__.autoExport
               ? _pathname
               : _as;
           this.basePath = basePath;
@@ -1660,6 +1661,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
           this.isSsr = true;
           this.isFallback = isFallback;
+          this.isReady = !!(
+            self.__NEXT_DATA__.gssp ||
+            self.__NEXT_DATA__.gip ||
+            !self.location.search
+          );
 
           if (false) {
           }
@@ -1817,9 +1823,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             return _context.abrupt("return", false);
 
                           case 3:
-                            // Default to scroll reset behavior unless explicitly specified to be
+                            // for static pages with query params in the URL we delay
+                            // marking the router ready until after the query is updated
+                            if (options._h) {
+                              this.isReady = true;
+                            } // Default to scroll reset behavior unless explicitly specified to be
                             // `false`! This makes the behavior between using `Router#push` and a
                             // `<Link />` consistent.
+
                             options.scroll = !!((_options$scroll =
                               options.scroll) != null
                               ? _options$scroll
@@ -1827,7 +1838,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             localeChange = options.locale !== this.locale;
 
                             if (true) {
-                              _context.next = 17;
+                              _context.next = 18;
                               break;
                             }
 
@@ -1880,7 +1891,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             }
 
                             if (!didNavigate) {
-                              _context.next = 17;
+                              _context.next = 18;
                               break;
                             }
 
@@ -1889,7 +1900,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               new Promise(function() {})
                             );
 
-                          case 17:
+                          case 18:
                             if (!options._h) {
                               this.isSsr = false;
                             } // marking route changes as a navigation start entry
@@ -1934,7 +1945,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (
                               !(!options._h && this.onlyAHashChange(cleanedAs))
                             ) {
-                              _context.next = 33;
+                              _context.next = 34;
                               break;
                             }
 
@@ -1955,7 +1966,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             return _context.abrupt("return", true);
 
-                          case 33:
+                          case 34:
                             parsed = (0, _parseRelativeUrl.parseRelativeUrl)(
                               url
                             );
@@ -1965,30 +1976,30 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             // get their query parameters to allow ensuring they can be parsed properly
                             // when rewritten to
 
-                            _context.prev = 35;
-                            _context.next = 38;
+                            _context.prev = 36;
+                            _context.next = 39;
                             return this.pageLoader.getPageList();
 
-                          case 38:
+                          case 39:
                             pages = _context.sent;
-                            _context.next = 41;
+                            _context.next = 42;
                             return (0, _routeLoader.getClientBuildManifest)();
 
-                          case 41:
+                          case 42:
                             _yield = _context.sent;
                             rewrites = _yield.__rewrites;
-                            _context.next = 49;
+                            _context.next = 50;
                             break;
 
-                          case 45:
-                            _context.prev = 45;
-                            _context.t0 = _context["catch"](35);
+                          case 46:
+                            _context.prev = 46;
+                            _context.t0 = _context["catch"](36);
                             // If we fail to resolve the page list or client-build manifest, we must
                             // do a server-side transition:
                             window.location.href = as;
                             return _context.abrupt("return", false);
 
-                          case 49:
+                          case 50:
                             parsed = this._resolveHref(parsed, pages);
 
                             if (parsed.pathname !== pathname) {
@@ -2030,7 +2041,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
 
                             if (!(0, _isDynamic.isDynamicRoute)(route)) {
-                              _context.next = 72;
+                              _context.next = 73;
                               break;
                             }
 
@@ -2053,7 +2064,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 (shouldInterpolate && !interpolatedAs.result)
                               )
                             ) {
-                              _context.next = 71;
+                              _context.next = 72;
                               break;
                             }
 
@@ -2064,7 +2075,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             });
 
                             if (!(missingParams.length > 0)) {
-                              _context.next = 69;
+                              _context.next = 70;
                               break;
                             }
 
@@ -2095,11 +2106,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 )
                             );
 
-                          case 69:
-                            _context.next = 72;
+                          case 70:
+                            _context.next = 73;
                             break;
 
-                          case 71:
+                          case 72:
                             if (shouldInterpolate) {
                               as = (0, _utils.formatWithValidation)(
                                 Object.assign({}, _parsedAs, {
@@ -2115,14 +2126,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               Object.assign(query, routeMatch);
                             }
 
-                          case 72:
+                          case 73:
                             Router.events.emit(
                               "routeChangeStart",
                               as,
                               routeProps
                             );
-                            _context.prev = 73;
-                            _context.next = 76;
+                            _context.prev = 74;
+                            _context.next = 77;
                             return this.getRouteInfo(
                               route,
                               pathname,
@@ -2131,7 +2142,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               routeProps
                             );
 
-                          case 76:
+                          case 77:
                             routeInfo = _context.sent;
                             (_routeInfo = routeInfo),
                               (error = _routeInfo.error),
@@ -2140,14 +2151,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               (__N_SSP = _routeInfo.__N_SSP); // handle redirect on client-transition
 
                             if (!((__N_SSG || __N_SSP) && props)) {
-                              _context.next = 102;
+                              _context.next = 103;
                               break;
                             }
 
                             if (
                               !(props.pageProps && props.pageProps.__N_REDIRECT)
                             ) {
-                              _context.next = 89;
+                              _context.next = 90;
                               break;
                             }
 
@@ -2156,7 +2167,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             // it's not
 
                             if (!destination.startsWith("/")) {
-                              _context.next = 87;
+                              _context.next = 88;
                               break;
                             }
 
@@ -2166,7 +2177,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             this._resolveHref(parsedHref, pages, false);
 
                             if (!pages.includes(parsedHref.pathname)) {
-                              _context.next = 87;
+                              _context.next = 88;
                               break;
                             }
 
@@ -2182,35 +2193,35 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               this.change(method, newUrl, newAs, options)
                             );
 
-                          case 87:
+                          case 88:
                             window.location.href = destination;
                             return _context.abrupt(
                               "return",
                               new Promise(function() {})
                             );
 
-                          case 89:
+                          case 90:
                             if (!(props.notFound === SSG_DATA_NOT_FOUND)) {
-                              _context.next = 102;
+                              _context.next = 103;
                               break;
                             }
 
-                            _context.prev = 90;
-                            _context.next = 93;
+                            _context.prev = 91;
+                            _context.next = 94;
                             return this.fetchComponent("/404");
 
-                          case 93:
+                          case 94:
                             notFoundRoute = "/404";
-                            _context.next = 99;
+                            _context.next = 100;
                             break;
 
-                          case 96:
-                            _context.prev = 96;
-                            _context.t1 = _context["catch"](90);
+                          case 97:
+                            _context.prev = 97;
+                            _context.t1 = _context["catch"](91);
                             notFoundRoute = "/_error";
 
-                          case 99:
-                            _context.next = 101;
+                          case 100:
+                            _context.next = 102;
                             return this.getRouteInfo(
                               notFoundRoute,
                               notFoundRoute,
@@ -2221,10 +2232,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               }
                             );
 
-                          case 101:
+                          case 102:
                             routeInfo = _context.sent;
 
-                          case 102:
+                          case 103:
                             Router.events.emit(
                               "beforeHistoryChange",
                               as,
@@ -2235,7 +2246,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (false) {
                             }
 
-                            _context.next = 107;
+                            _context.next = 108;
                             return this.set(
                               route,
                               pathname,
@@ -2248,9 +2259,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               else throw e;
                             });
 
-                          case 107:
+                          case 108:
                             if (!error) {
-                              _context.next = 110;
+                              _context.next = 111;
                               break;
                             }
 
@@ -2262,7 +2273,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             throw error;
 
-                          case 110:
+                          case 111:
                             if (false) {
                             }
 
@@ -2276,21 +2287,21 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             return _context.abrupt("return", true);
 
-                          case 116:
-                            _context.prev = 116;
-                            _context.t2 = _context["catch"](73);
+                          case 117:
+                            _context.prev = 117;
+                            _context.t2 = _context["catch"](74);
 
                             if (!_context.t2.cancelled) {
-                              _context.next = 120;
+                              _context.next = 121;
                               break;
                             }
 
                             return _context.abrupt("return", false);
 
-                          case 120:
+                          case 121:
                             throw _context.t2;
 
-                          case 121:
+                          case 122:
                           case "end":
                             return _context.stop();
                         }
@@ -2299,9 +2310,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     _callee,
                     this,
                     [
-                      [35, 45],
-                      [73, 116],
-                      [90, 96]
+                      [36, 46],
+                      [74, 117],
+                      [91, 97]
                     ]
                   );
                 })
@@ -4326,7 +4337,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
         "basePath",
         "locale",
         "locales",
-        "defaultLocale"
+        "defaultLocale",
+        "isReady"
       ];
       var routerEvents = [
         "routeChangeStart",

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3bda7895f2274301f1c8.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.91164d0d6b2fcebbf615.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3bda7895f2274301f1c8.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.91164d0d6b2fcebbf615.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3bda7895f2274301f1c8.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.91164d0d6b2fcebbf615.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3bda7895f2274301f1c8.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.91164d0d6b2fcebbf615.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3bda7895f2274301f1c8.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.91164d0d6b2fcebbf615.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.3bda7895f2274301f1c8.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.91164d0d6b2fcebbf615.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
buildDuration	10.7s	10.5s	-179ms
nodeModulesSize	83 MB	83 MB	⚠️ +1.48 kB

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

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
677f882d2ed8..6cec.js gzip	12.8 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-b45d971..6435.js gzip	6.59 kB	6.59 kB	✓
webpack-7193..1446.js gzip	751 B	751 B	✓
677f882d2ed8..a44e.js gzip	N/A	12.8 kB	N/A
Overall change	59.1 kB	59.2 kB	⚠️ +44 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
polyfills-67..b7d1.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_app-6220e08..9a40.js gzip	1.28 kB	1.28 kB	✓
_error-4b0b5..2c91.js gzip	3.44 kB	3.44 kB	✓
hooks-5f309a..7282.js gzip	887 B	887 B	✓
index-57f580..c562.js gzip	227 B	227 B	✓
link-1a1f628..eeb5.js gzip	1.61 kB	1.61 kB	✓
routerDirect..bd82.js gzip	303 B	303 B	✓
withRouter-2..e384.js gzip	302 B	302 B	✓
Overall change	8.05 kB	8.05 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_buildManifest.js gzip	322 B	322 B	✓
Overall change	322 B	322 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_error.js	1 MB	1 MB	⚠️ +130 B
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	⚠️ +130 B
link.js	1.06 MB	1.06 MB	⚠️ +386 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +386 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +386 B
Overall change	5.17 MB	5.17 MB	⚠️ +1.42 kB

Commit: 1e37c6a

# Conflicts: # packages/next/next-server/server/render.tsx

# Conflicts: # test/integration/build-output/test/index.test.js

ijjk · 2020-12-31T16:31:48Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
buildDuration	8.8s	8.8s	⚠️ +19ms
nodeModulesSize	83 MB	83 MB	⚠️ +1.48 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.732	1.774	⚠️ +0.04
/ avg req/sec	1443.39	1409.48	⚠️ -33.91
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.095	1.06	-0.03
/error-in-render avg req/sec	2283.24	2358.29	+75.05

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

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
677f882d2ed8..381c.js gzip	12.9 kB	12.9 kB	⚠️ +38 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-212f85f..f23b.js gzip	6.59 kB	6.59 kB	✓
webpack-7193..1446.js gzip	751 B	751 B	✓
Overall change	59.2 kB	59.2 kB	⚠️ +38 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
polyfills-67..b7d1.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_app-6220e08..9a40.js gzip	1.28 kB	1.28 kB	✓
_error-4b0b5..2c91.js gzip	3.44 kB	3.44 kB	✓
hooks-5f309a..7282.js gzip	887 B	887 B	✓
index-57f580..c562.js gzip	227 B	227 B	✓
link-b862cd7..dba8.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bd82.js gzip	303 B	303 B	✓
withRouter-2..e384.js gzip	302 B	302 B	✓
Overall change	8.08 kB	8.08 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
index.html gzip	616 B	617 B	⚠️ +1 B
link.html gzip	622 B	622 B	✓
withRouter.html gzip	609 B	610 B	⚠️ +1 B
Overall change	1.85 kB	1.85 kB	⚠️ +2 B

Diffs

Diff for 677f882d2ed8..f7195fca6.js

@@ -1558,6 +1558,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this.locales = void 0;
           this.defaultLocale = void 0;
           this.domainLocales = void 0;
+          this.isReady = void 0;
           this._idx = 0;
 
           this.onPopState = function(e) {
@@ -1666,9 +1667,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this.query = _query; // if auto prerendered and dynamic route wait to update asPath
           // until after mount to prevent hydration mismatch
 
-          this.asPath = // @ts-ignore this is temporarily global (attached to window)
+          this.asPath =
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
-            __NEXT_DATA__.autoExport
+            self.__NEXT_DATA__.autoExport
               ? _pathname
               : _as;
           this.basePath = basePath;
@@ -1679,6 +1680,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
           this.isSsr = true;
           this.isFallback = isFallback;
+          this.isReady = !!(
+            self.__NEXT_DATA__.gssp ||
+            self.__NEXT_DATA__.gip ||
+            !self.location.search
+          );
 
           if (false) {
           }
@@ -1840,9 +1846,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             return _context.abrupt("return", false);
 
                           case 3:
-                            // Default to scroll reset behavior unless explicitly specified to be
+                            // for static pages with query params in the URL we delay
+                            // marking the router ready until after the query is updated
+                            if (options._h) {
+                              this.isReady = true;
+                            } // Default to scroll reset behavior unless explicitly specified to be
                             // `false`! This makes the behavior between using `Router#push` and a
                             // `<Link />` consistent.
+
                             options.scroll = !!((_options$scroll =
                               options.scroll) != null
                               ? _options$scroll
@@ -1850,7 +1861,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             localeChange = options.locale !== this.locale;
 
                             if (true) {
-                              _context.next = 17;
+                              _context.next = 18;
                               break;
                             }
 
@@ -1903,7 +1914,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             }
 
                             if (!didNavigate) {
-                              _context.next = 17;
+                              _context.next = 18;
                               break;
                             }
 
@@ -1912,7 +1923,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               new Promise(function() {})
                             );
 
-                          case 17:
+                          case 18:
                             if (!options._h) {
                               this.isSsr = false;
                             } // marking route changes as a navigation start entry
@@ -1957,7 +1968,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (
                               !(!options._h && this.onlyAHashChange(cleanedAs))
                             ) {
-                              _context.next = 33;
+                              _context.next = 34;
                               break;
                             }
 
@@ -1978,7 +1989,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             return _context.abrupt("return", true);
 
-                          case 33:
+                          case 34:
                             parsed = (0, _parseRelativeUrl.parseRelativeUrl)(
                               url
                             );
@@ -1988,30 +1999,30 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             // get their query parameters to allow ensuring they can be parsed properly
                             // when rewritten to
 
-                            _context.prev = 35;
-                            _context.next = 38;
+                            _context.prev = 36;
+                            _context.next = 39;
                             return this.pageLoader.getPageList();
 
-                          case 38:
+                          case 39:
                             pages = _context.sent;
-                            _context.next = 41;
+                            _context.next = 42;
                             return (0, _routeLoader.getClientBuildManifest)();
 
-                          case 41:
+                          case 42:
                             _yield = _context.sent;
                             rewrites = _yield.__rewrites;
-                            _context.next = 49;
+                            _context.next = 50;
                             break;
 
-                          case 45:
-                            _context.prev = 45;
-                            _context.t0 = _context["catch"](35);
+                          case 46:
+                            _context.prev = 46;
+                            _context.t0 = _context["catch"](36);
                             // If we fail to resolve the page list or client-build manifest, we must
                             // do a server-side transition:
                             window.location.href = as;
                             return _context.abrupt("return", false);
 
-                          case 49:
+                          case 50:
                             parsed = this._resolveHref(parsed, pages);
 
                             if (parsed.pathname !== pathname) {
@@ -2053,7 +2064,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
 
                             if (!(0, _isDynamic.isDynamicRoute)(route)) {
-                              _context.next = 72;
+                              _context.next = 73;
                               break;
                             }
 
@@ -2076,7 +2087,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 (shouldInterpolate && !interpolatedAs.result)
                               )
                             ) {
-                              _context.next = 71;
+                              _context.next = 72;
                               break;
                             }
 
@@ -2087,7 +2098,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             });
 
                             if (!(missingParams.length > 0)) {
-                              _context.next = 69;
+                              _context.next = 70;
                               break;
                             }
 
@@ -2118,11 +2129,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 )
                             );
 
-                          case 69:
-                            _context.next = 72;
+                          case 70:
+                            _context.next = 73;
                             break;
 
-                          case 71:
+                          case 72:
                             if (shouldInterpolate) {
                               as = (0, _utils.formatWithValidation)(
                                 Object.assign({}, _parsedAs, {
@@ -2138,14 +2149,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               Object.assign(query, routeMatch);
                             }
 
-                          case 72:
+                          case 73:
                             Router.events.emit(
                               "routeChangeStart",
                               as,
                               routeProps
                             );
-                            _context.prev = 73;
-                            _context.next = 76;
+                            _context.prev = 74;
+                            _context.next = 77;
                             return this.getRouteInfo(
                               route,
                               pathname,
@@ -2154,7 +2165,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               routeProps
                             );
 
-                          case 76:
+                          case 77:
                             routeInfo = _context.sent;
                             (_routeInfo = routeInfo),
                               (error = _routeInfo.error),
@@ -2163,14 +2174,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               (__N_SSP = _routeInfo.__N_SSP); // handle redirect on client-transition
 
                             if (!((__N_SSG || __N_SSP) && props)) {
-                              _context.next = 102;
+                              _context.next = 103;
                               break;
                             }
 
                             if (
                               !(props.pageProps && props.pageProps.__N_REDIRECT)
                             ) {
-                              _context.next = 89;
+                              _context.next = 90;
                               break;
                             }
 
@@ -2179,7 +2190,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             // it's not
 
                             if (!destination.startsWith("/")) {
-                              _context.next = 87;
+                              _context.next = 88;
                               break;
                             }
 
@@ -2189,7 +2200,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             this._resolveHref(parsedHref, pages, false);
 
                             if (!pages.includes(parsedHref.pathname)) {
-                              _context.next = 87;
+                              _context.next = 88;
                               break;
                             }
 
@@ -2205,35 +2216,35 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               this.change(method, newUrl, newAs, options)
                             );
 
-                          case 87:
+                          case 88:
                             window.location.href = destination;
                             return _context.abrupt(
                               "return",
                               new Promise(function() {})
                             );
 
-                          case 89:
+                          case 90:
                             if (!(props.notFound === SSG_DATA_NOT_FOUND)) {
-                              _context.next = 102;
+                              _context.next = 103;
                               break;
                             }
 
-                            _context.prev = 90;
-                            _context.next = 93;
+                            _context.prev = 91;
+                            _context.next = 94;
                             return this.fetchComponent("/404");
 
-                          case 93:
+                          case 94:
                             notFoundRoute = "/404";
-                            _context.next = 99;
+                            _context.next = 100;
                             break;
 
-                          case 96:
-                            _context.prev = 96;
-                            _context.t1 = _context["catch"](90);
+                          case 97:
+                            _context.prev = 97;
+                            _context.t1 = _context["catch"](91);
                             notFoundRoute = "/_error";
 
-                          case 99:
-                            _context.next = 101;
+                          case 100:
+                            _context.next = 102;
                             return this.getRouteInfo(
                               notFoundRoute,
                               notFoundRoute,
@@ -2244,10 +2255,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               }
                             );
 
-                          case 101:
+                          case 102:
                             routeInfo = _context.sent;
 
-                          case 102:
+                          case 103:
                             Router.events.emit(
                               "beforeHistoryChange",
                               as,
@@ -2258,7 +2269,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (false) {
                             }
 
-                            _context.next = 107;
+                            _context.next = 108;
                             return this.set(
                               route,
                               pathname,
@@ -2277,9 +2288,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               else throw e;
                             });
 
-                          case 107:
+                          case 108:
                             if (!error) {
-                              _context.next = 110;
+                              _context.next = 111;
                               break;
                             }
 
@@ -2291,7 +2302,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             throw error;
 
-                          case 110:
+                          case 111:
                             if (false) {
                             }
 
@@ -2302,21 +2313,21 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             return _context.abrupt("return", true);
 
-                          case 115:
-                            _context.prev = 115;
-                            _context.t2 = _context["catch"](73);
+                          case 116:
+                            _context.prev = 116;
+                            _context.t2 = _context["catch"](74);
 
                             if (!_context.t2.cancelled) {
-                              _context.next = 119;
+                              _context.next = 120;
                               break;
                             }
 
                             return _context.abrupt("return", false);
 
-                          case 119:
+                          case 120:
                             throw _context.t2;
 
-                          case 120:
+                          case 121:
                           case "end":
                             return _context.stop();
                         }
@@ -2325,9 +2336,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     _callee,
                     this,
                     [
-                      [35, 45],
-                      [73, 115],
-                      [90, 96]
+                      [36, 46],
+                      [74, 116],
+                      [91, 97]
                     ]
                   );
                 })
@@ -4354,7 +4365,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
         "basePath",
         "locale",
         "locales",
-        "defaultLocale"
+        "defaultLocale",
+        "isReady"
       ];
       var routerEvents = [
         "routeChangeStart",

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
buildDuration	10.4s	10.4s	-26ms
nodeModulesSize	83 MB	83 MB	⚠️ +1.48 kB

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

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
677f882d2ed8..381c.js gzip	12.9 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-212f85f..f23b.js gzip	6.59 kB	6.59 kB	✓
webpack-7193..1446.js gzip	751 B	751 B	✓
677f882d2ed8..2428.js gzip	N/A	12.9 kB	N/A
Overall change	59.2 kB	59.2 kB	⚠️ +38 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
polyfills-67..b7d1.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_app-6220e08..9a40.js gzip	1.28 kB	1.28 kB	✓
_error-4b0b5..2c91.js gzip	3.44 kB	3.44 kB	✓
hooks-5f309a..7282.js gzip	887 B	887 B	✓
index-57f580..c562.js gzip	227 B	227 B	✓
link-b862cd7..dba8.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bd82.js gzip	303 B	303 B	✓
withRouter-2..e384.js gzip	302 B	302 B	✓
Overall change	8.08 kB	8.08 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_error.js	1 MB	1 MB	⚠️ +130 B
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	⚠️ +130 B
link.js	1.06 MB	1.06 MB	⚠️ +386 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +386 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +386 B
Overall change	5.17 MB	5.17 MB	⚠️ +1.42 kB

Commit: 9bc3846

ijjk · 2020-12-31T16:42:28Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
buildDuration	10.2s	10.1s	-94ms
nodeModulesSize	83 MB	83 MB	⚠️ +1.48 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.98	2.033	⚠️ +0.05
/ avg req/sec	1262.61	1229.84	⚠️ -32.77
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.243	1.216	-0.03
/error-in-render avg req/sec	2011.97	2055.76	+43.79

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

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
677f882d2ed8..381c.js gzip	12.9 kB	12.9 kB	⚠️ +38 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-212f85f..f23b.js gzip	6.59 kB	6.59 kB	✓
webpack-7193..1446.js gzip	751 B	751 B	✓
Overall change	59.2 kB	59.2 kB	⚠️ +38 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
polyfills-67..b7d1.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_app-6220e08..9a40.js gzip	1.28 kB	1.28 kB	✓
_error-4b0b5..2c91.js gzip	3.44 kB	3.44 kB	✓
hooks-5f309a..7282.js gzip	887 B	887 B	✓
index-57f580..c562.js gzip	227 B	227 B	✓
link-b862cd7..dba8.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bd82.js gzip	303 B	303 B	✓
withRouter-2..e384.js gzip	302 B	302 B	✓
Overall change	8.08 kB	8.08 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
index.html gzip	616 B	617 B	⚠️ +1 B
link.html gzip	622 B	622 B	✓
withRouter.html gzip	609 B	610 B	⚠️ +1 B
Overall change	1.85 kB	1.85 kB	⚠️ +2 B

Diffs

Diff for 677f882d2ed8..f7195fca6.js

@@ -1558,6 +1558,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this.locales = void 0;
           this.defaultLocale = void 0;
           this.domainLocales = void 0;
+          this.isReady = void 0;
           this._idx = 0;
 
           this.onPopState = function(e) {
@@ -1666,9 +1667,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
           this.query = _query; // if auto prerendered and dynamic route wait to update asPath
           // until after mount to prevent hydration mismatch
 
-          this.asPath = // @ts-ignore this is temporarily global (attached to window)
+          this.asPath =
             (0, _isDynamic.isDynamicRoute)(_pathname) &&
-            __NEXT_DATA__.autoExport
+            self.__NEXT_DATA__.autoExport
               ? _pathname
               : _as;
           this.basePath = basePath;
@@ -1679,6 +1680,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
           this.isSsr = true;
           this.isFallback = isFallback;
+          this.isReady = !!(
+            self.__NEXT_DATA__.gssp ||
+            self.__NEXT_DATA__.gip ||
+            !self.location.search
+          );
 
           if (false) {
           }
@@ -1840,9 +1846,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             return _context.abrupt("return", false);
 
                           case 3:
-                            // Default to scroll reset behavior unless explicitly specified to be
+                            // for static pages with query params in the URL we delay
+                            // marking the router ready until after the query is updated
+                            if (options._h) {
+                              this.isReady = true;
+                            } // Default to scroll reset behavior unless explicitly specified to be
                             // `false`! This makes the behavior between using `Router#push` and a
                             // `<Link />` consistent.
+
                             options.scroll = !!((_options$scroll =
                               options.scroll) != null
                               ? _options$scroll
@@ -1850,7 +1861,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             localeChange = options.locale !== this.locale;
 
                             if (true) {
-                              _context.next = 17;
+                              _context.next = 18;
                               break;
                             }
 
@@ -1903,7 +1914,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             }
 
                             if (!didNavigate) {
-                              _context.next = 17;
+                              _context.next = 18;
                               break;
                             }
 
@@ -1912,7 +1923,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               new Promise(function() {})
                             );
 
-                          case 17:
+                          case 18:
                             if (!options._h) {
                               this.isSsr = false;
                             } // marking route changes as a navigation start entry
@@ -1957,7 +1968,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (
                               !(!options._h && this.onlyAHashChange(cleanedAs))
                             ) {
-                              _context.next = 33;
+                              _context.next = 34;
                               break;
                             }
 
@@ -1978,7 +1989,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             return _context.abrupt("return", true);
 
-                          case 33:
+                          case 34:
                             parsed = (0, _parseRelativeUrl.parseRelativeUrl)(
                               url
                             );
@@ -1988,30 +1999,30 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             // get their query parameters to allow ensuring they can be parsed properly
                             // when rewritten to
 
-                            _context.prev = 35;
-                            _context.next = 38;
+                            _context.prev = 36;
+                            _context.next = 39;
                             return this.pageLoader.getPageList();
 
-                          case 38:
+                          case 39:
                             pages = _context.sent;
-                            _context.next = 41;
+                            _context.next = 42;
                             return (0, _routeLoader.getClientBuildManifest)();
 
-                          case 41:
+                          case 42:
                             _yield = _context.sent;
                             rewrites = _yield.__rewrites;
-                            _context.next = 49;
+                            _context.next = 50;
                             break;
 
-                          case 45:
-                            _context.prev = 45;
-                            _context.t0 = _context["catch"](35);
+                          case 46:
+                            _context.prev = 46;
+                            _context.t0 = _context["catch"](36);
                             // If we fail to resolve the page list or client-build manifest, we must
                             // do a server-side transition:
                             window.location.href = as;
                             return _context.abrupt("return", false);
 
-                          case 49:
+                          case 50:
                             parsed = this._resolveHref(parsed, pages);
 
                             if (parsed.pathname !== pathname) {
@@ -2053,7 +2064,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
 
                             if (!(0, _isDynamic.isDynamicRoute)(route)) {
-                              _context.next = 72;
+                              _context.next = 73;
                               break;
                             }
 
@@ -2076,7 +2087,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 (shouldInterpolate && !interpolatedAs.result)
                               )
                             ) {
-                              _context.next = 71;
+                              _context.next = 72;
                               break;
                             }
 
@@ -2087,7 +2098,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             });
 
                             if (!(missingParams.length > 0)) {
-                              _context.next = 69;
+                              _context.next = 70;
                               break;
                             }
 
@@ -2118,11 +2129,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                                 )
                             );
 
-                          case 69:
-                            _context.next = 72;
+                          case 70:
+                            _context.next = 73;
                             break;
 
-                          case 71:
+                          case 72:
                             if (shouldInterpolate) {
                               as = (0, _utils.formatWithValidation)(
                                 Object.assign({}, _parsedAs, {
@@ -2138,14 +2149,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               Object.assign(query, routeMatch);
                             }
 
-                          case 72:
+                          case 73:
                             Router.events.emit(
                               "routeChangeStart",
                               as,
                               routeProps
                             );
-                            _context.prev = 73;
-                            _context.next = 76;
+                            _context.prev = 74;
+                            _context.next = 77;
                             return this.getRouteInfo(
                               route,
                               pathname,
@@ -2154,7 +2165,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               routeProps
                             );
 
-                          case 76:
+                          case 77:
                             routeInfo = _context.sent;
                             (_routeInfo = routeInfo),
                               (error = _routeInfo.error),
@@ -2163,14 +2174,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               (__N_SSP = _routeInfo.__N_SSP); // handle redirect on client-transition
 
                             if (!((__N_SSG || __N_SSP) && props)) {
-                              _context.next = 102;
+                              _context.next = 103;
                               break;
                             }
 
                             if (
                               !(props.pageProps && props.pageProps.__N_REDIRECT)
                             ) {
-                              _context.next = 89;
+                              _context.next = 90;
                               break;
                             }
 
@@ -2179,7 +2190,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             // it's not
 
                             if (!destination.startsWith("/")) {
-                              _context.next = 87;
+                              _context.next = 88;
                               break;
                             }
 
@@ -2189,7 +2200,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             this._resolveHref(parsedHref, pages, false);
 
                             if (!pages.includes(parsedHref.pathname)) {
-                              _context.next = 87;
+                              _context.next = 88;
                               break;
                             }
 
@@ -2205,35 +2216,35 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               this.change(method, newUrl, newAs, options)
                             );
 
-                          case 87:
+                          case 88:
                             window.location.href = destination;
                             return _context.abrupt(
                               "return",
                               new Promise(function() {})
                             );
 
-                          case 89:
+                          case 90:
                             if (!(props.notFound === SSG_DATA_NOT_FOUND)) {
-                              _context.next = 102;
+                              _context.next = 103;
                               break;
                             }
 
-                            _context.prev = 90;
-                            _context.next = 93;
+                            _context.prev = 91;
+                            _context.next = 94;
                             return this.fetchComponent("/404");
 
-                          case 93:
+                          case 94:
                             notFoundRoute = "/404";
-                            _context.next = 99;
+                            _context.next = 100;
                             break;
 
-                          case 96:
-                            _context.prev = 96;
-                            _context.t1 = _context["catch"](90);
+                          case 97:
+                            _context.prev = 97;
+                            _context.t1 = _context["catch"](91);
                             notFoundRoute = "/_error";
 
-                          case 99:
-                            _context.next = 101;
+                          case 100:
+                            _context.next = 102;
                             return this.getRouteInfo(
                               notFoundRoute,
                               notFoundRoute,
@@ -2244,10 +2255,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               }
                             );
 
-                          case 101:
+                          case 102:
                             routeInfo = _context.sent;
 
-                          case 102:
+                          case 103:
                             Router.events.emit(
                               "beforeHistoryChange",
                               as,
@@ -2258,7 +2269,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             if (false) {
                             }
 
-                            _context.next = 107;
+                            _context.next = 108;
                             return this.set(
                               route,
                               pathname,
@@ -2277,9 +2288,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               else throw e;
                             });
 
-                          case 107:
+                          case 108:
                             if (!error) {
-                              _context.next = 110;
+                              _context.next = 111;
                               break;
                             }
 
@@ -2291,7 +2302,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             throw error;
 
-                          case 110:
+                          case 111:
                             if (false) {
                             }
 
@@ -2302,21 +2313,21 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                             );
                             return _context.abrupt("return", true);
 
-                          case 115:
-                            _context.prev = 115;
-                            _context.t2 = _context["catch"](73);
+                          case 116:
+                            _context.prev = 116;
+                            _context.t2 = _context["catch"](74);
 
                             if (!_context.t2.cancelled) {
-                              _context.next = 119;
+                              _context.next = 120;
                               break;
                             }
 
                             return _context.abrupt("return", false);
 
-                          case 119:
+                          case 120:
                             throw _context.t2;
 
-                          case 120:
+                          case 121:
                           case "end":
                             return _context.stop();
                         }
@@ -2325,9 +2336,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                     _callee,
                     this,
                     [
-                      [35, 45],
-                      [73, 115],
-                      [90, 96]
+                      [36, 46],
+                      [74, 116],
+                      [91, 97]
                     ]
                   );
                 })
@@ -4354,7 +4365,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
         "basePath",
         "locale",
         "locales",
-        "defaultLocale"
+        "defaultLocale",
+        "isReady"
       ];
       var routerEvents = [
         "routeChangeStart",

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.2d9f36cd3bbf7195fca6.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.8fc8494a87d09954e463.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
buildDuration	11.8s	11.6s	-260ms
nodeModulesSize	83 MB	83 MB	⚠️ +1.48 kB

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

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
677f882d2ed8..381c.js gzip	12.9 kB	N/A	N/A
framework.HASH.js gzip	39 kB	39 kB	✓
main-212f85f..f23b.js gzip	6.59 kB	6.59 kB	✓
webpack-7193..1446.js gzip	751 B	751 B	✓
677f882d2ed8..2428.js gzip	N/A	12.9 kB	N/A
Overall change	59.2 kB	59.2 kB	⚠️ +38 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
polyfills-67..b7d1.js gzip	31.2 kB	31.2 kB	✓
Overall change	31.2 kB	31.2 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_app-6220e08..9a40.js gzip	1.28 kB	1.28 kB	✓
_error-4b0b5..2c91.js gzip	3.44 kB	3.44 kB	✓
hooks-5f309a..7282.js gzip	887 B	887 B	✓
index-57f580..c562.js gzip	227 B	227 B	✓
link-b862cd7..dba8.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bd82.js gzip	303 B	303 B	✓
withRouter-2..e384.js gzip	302 B	302 B	✓
Overall change	8.08 kB	8.08 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/router-ready	Change
_error.js	1 MB	1 MB	⚠️ +130 B
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	⚠️ +130 B
link.js	1.06 MB	1.06 MB	⚠️ +386 B
routerDirect.js	1.05 MB	1.05 MB	⚠️ +386 B
withRouter.js	1.05 MB	1.05 MB	⚠️ +386 B
Overall change	5.17 MB	5.17 MB	⚠️ +1.42 kB

Commit: 23d34c2

mcunningham · 2021-01-04T01:39:44Z

@Timer @ijjk hi there, I have been testing the isReady boolean behavior in latest canary release 10.0.5-canary.8 and still having issues with it. I very well could be missing something, but just to confirm the isReady boolean should be false when router.query is an empty object and then true when the router.query object is available and has the proper keys correct? When I was testing with dynamic routes in a useEffect, the isReady flag was always true for me, even when the router.query object was empty. I have produced a codesandbox here where you can check the console to see the isReady always being true even when the router.query object is empty. Here is the project view for the code if you want to take a look at the code, but it's pretty self explanatory. I also tried in production deployed to vercel and same issue. Let me know if you want me to open another issue or If I am missing something with this. Thanks for all you both do!

ijjk · 2021-01-04T04:05:30Z

Hi @shufflemattdev thanks for testing this out, this does sound to be correct and isReady should not be initially true for an automatically statically optimized dynamic route without a query, I opened a PR here to update this.

Follow-up to #20628 this ensures `isReady` is not initially true when the query isn't present but the page is an automatically statically optimized dynamic route

mcunningham · 2021-01-04T16:24:01Z

@ijjk no problem, just wanted to make sure you caught it before the next stable release. Just tried on 10.0.5-canary.9 which has your PR and it worked as expected now with the initial bool false 👍

Follow #20628

PepijnSenders · 2021-01-20T23:10:32Z

@ijjk we have a system that runs tests on a page with a router that we inject manually, using the next.js createRouter function:

import { createRouter } from 'next/router';

const createMockedRouter = (path, query, as) => {
  const nextRouter = createRouter(path, query, as, {});

  return nextRouter;
};

export default createMockedRouter;

This function started failing when running it server-side (since 10.0.5). This PR makes createRouter() depend on self and self.__NEXT_DATA__, which are obviously not defined when running it on the server. I added a quick fix:

import { createRouter } from 'next/router';

const createMockedRouter = (path, query, as) => {
  global.self = {
    __NEXT_DATA__: {},
    location: { search: {} },
  };

  const nextRouter = createRouter(path, query, as, {});

  return nextRouter;
};

export default createMockedRouter;

Luckily this is only a test script, so nothing that would fail under production, but maybe we can add the isReady check under this conditional? What I understand from this PR it is only available in useEffect() anyways.

ijjk · 2021-01-21T08:14:50Z

@PepijnSenders the router from next/router is not meant to be used server-side, there is a separate router here that is used specifically for SSR.

Note: createRouter is an internal method (not publicly documented) and is not meant to be used publicly and as such could change at anytime

From #20628, when the page is rendered server-side, `Router`'s `isReady` field needs to be initially set to `true`. However, when `_app` has custom `getInitialProps`, it seems that it is not the case, even though the page is rendered on the server. This leads to a bug that `Router.isReady` is never set to `true`. This pull request fixes the problem by fixing the initial calculation logic of `isReady` of `Router`. ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes

…#27473) From vercel#20628, when the page is rendered server-side, `Router`'s `isReady` field needs to be initially set to `true`. However, when `_app` has custom `getInitialProps`, it seems that it is not the case, even though the page is rendered on the server. This leads to a bug that `Router.isReady` is never set to `true`. This pull request fixes the problem by fixing the initial calculation logic of `isReady` of `Router`. ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes

ijjk added 2 commits December 30, 2020 21:27

Add isReady field on router

e5e71b9

Merge remote-tracking branch 'upstream/canary' into add/router-ready

7c82ac3

ijjk requested review from chibicode, lfades, Timer and timneutkens as code owners December 31, 2020 03:29

ijjk added type: documentation type: next labels Dec 31, 2020

vercel bot temporarily deployed to Preview December 31, 2020 03:29 Inactive

This comment has been minimized.

Sign in to view

Update test

7fb0f68

vercel bot temporarily deployed to Preview December 31, 2020 04:10 Inactive

This comment has been minimized.

Sign in to view

Disable server isReady error

1e37c6a

vercel bot temporarily deployed to Preview December 31, 2020 04:41 Inactive

Timer previously approved these changes Dec 31, 2020

View reviewed changes

Merge remote-tracking branch 'upstream/canary' into add/router-ready

8ff70bf

# Conflicts: # packages/next/next-server/server/render.tsx

ijjk dismissed Timer’s stale review via 8ff70bf December 31, 2020 15:53

vercel bot temporarily deployed to Preview December 31, 2020 15:53 Inactive

ijjk requested a review from Timer December 31, 2020 15:53

This comment has been minimized.

Sign in to view

ijjk added 2 commits December 31, 2020 10:19

Merge remote-tracking branch 'upstream/canary' into add/router-ready

73a1cb4

# Conflicts: # test/integration/build-output/test/index.test.js

Update size-limit

9bc3846

Timer approved these changes Dec 31, 2020

View reviewed changes

Merge branch 'canary' into add/router-ready

23d34c2

kodiakhq bot merged commit 3a9d18b into vercel:canary Dec 31, 2020

ijjk deleted the add/router-ready branch January 4, 2021 04:03

ijjk mentioned this pull request Jan 4, 2021

Ensure isReady is set correctly for auto static dynamic route #20729

Merged

webda2l mentioned this pull request Jan 6, 2021

Add missing isReady declaration to NextRouter type #20819

Merged

kodiakhq bot pushed a commit that referenced this pull request Jan 6, 2021

Add missing isReady declaration to NextRouter type (#20819)

79e5615

Follow #20628

raon0211 mentioned this pull request Jul 25, 2021

fix: Make router ready in case of custom _app getInitialProps #27473

Merged

10 tasks

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add isReady field on router #20628

Add isReady field on router #20628

ijjk commented Dec 31, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Dec 31, 2020

Diffs

This comment has been minimized.

This comment has been minimized.

ijjk commented Dec 31, 2020

Diffs

ijjk commented Dec 31, 2020

Diffs

mcunningham commented Jan 4, 2021 •

edited

Loading

ijjk commented Jan 4, 2021

mcunningham commented Jan 4, 2021

PepijnSenders commented Jan 20, 2021 •

edited

Loading

ijjk commented Jan 21, 2021

Add isReady field on router #20628

Add isReady field on router #20628

Conversation

ijjk commented Dec 31, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Dec 31, 2020

Stats from current PR

Diffs

This comment has been minimized.

This comment has been minimized.

ijjk commented Dec 31, 2020

Stats from current PR

Diffs

ijjk commented Dec 31, 2020

Stats from current PR

Diffs

mcunningham commented Jan 4, 2021 • edited Loading

ijjk commented Jan 4, 2021

mcunningham commented Jan 4, 2021

PepijnSenders commented Jan 20, 2021 • edited Loading

ijjk commented Jan 21, 2021

mcunningham commented Jan 4, 2021 •

edited

Loading

PepijnSenders commented Jan 20, 2021 •

edited

Loading