Split up & tweak `next/client` initialization #33838

devknoll · 2022-01-31T21:09:56Z

For streaming, we want the main bundle to be loaded with async rather than defer. As the first step to doing that, we need an explicit initialization step, rather than occurring as a side effect of being loaded.

For now, I've just split the logic into a initialization and hydrate (previously initNext) functions and called them as a side effect of next/client/next and next/client/next-dev as before. A follow-up PR will move that to a separate script tag as recommended.

ijjk · 2022-02-01T01:08:43Z

Failing test suites

Commit: cd73b8a

test/integration/next-dynamic-lazy-compilation/test/index.test.js

next/dynamic > dev mode > should render dynamic server rendered values before hydration

Expand output

● next/dynamic › dev mode › should render dynamic server rendered values before hydration

expect(received).toBe(expected) // Object.is equality

Expected: "Index<!-- -->1<!-- -->2<!-- -->3<!-- -->4<!-- -->4"
Received: "the-second-server-value"

  21 | function runTests() {
  22 |   it('should render server value', async () => {
> 23 |     const html = await renderViaHTTP(appPort, '/')
     |                      ^
  24 |     expect(html).toMatch(/the-server-value/i)
  25 |     expect(html).toMatch(/the-second-server-value/i)
  26 |   })

  at Object.<anonymous> (integration/next-dynamic-lazy-compilation/test/index.test.js:23:22)

ijjk · 2022-02-03T16:46:07Z

Looks like we need to resolve the conflicts before merging @devknoll

ijjk · 2022-03-07T17:10:02Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-clean-up-initialization	Change
buildDuration	16.9s	17.8s	⚠️ +854ms
buildDurationCached	6.4s	6.5s	⚠️ +60ms
nodeModulesSize	372 MB	372 MB	⚠️ +2.11 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js x-clean-up-initialization	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.737	4.188	⚠️ +0.45
/ avg req/sec	669.03	596.91	⚠️ -72.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.847	2.071	⚠️ +0.22
/error-in-render avg req/sec	1353.47	1207.34	⚠️ -146.13

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-clean-up-initialization	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	⚠️ +7 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.5 kB	71.5 kB	⚠️ +7 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-clean-up-initialization	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-up-initialization	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.06 kB	5.06 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.8 kB	14.8 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-clean-up-initialization	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-clean-up-initialization	Change
index.html gzip	531 B	532 B	⚠️ +1 B
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -450,7 +450,8 @@
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      exports.initNext = initNext;
+      exports.initialize = initialize;
+      exports.hydrate = hydrate;
       exports.emitter = exports.router = exports.version = void 0;
       __webpack_require__(37);
       var _react = _interopRequireWildcard1(__webpack_require__(7294));
@@ -623,87 +624,26 @@
         }
         return target;
       }
-      var data = JSON.parse(
-        document.getElementById("__NEXT_DATA__").textContent
-      );
-      window.__NEXT_DATA__ = data;
       var version = "12.1.1-canary.6";
       exports.version = version;
+      var router;
+      exports.router = router;
+      var emitter = (0, _mitt).default();
+      exports.emitter = emitter;
       var looseToArray = function(input) {
         return [].slice.call(input);
       };
-      var hydrateProps = data.props,
-        hydrateErr = data.err,
-        page = data.page,
-        query = data.query,
-        buildId = data.buildId,
-        assetPrefix = data.assetPrefix,
-        runtimeConfig = data.runtimeConfig,
-        dynamicIds = data.dynamicIds,
-        isFallback = data.isFallback,
-        locale = data.locale,
-        locales = data.locales,
-        domainLocales = data.domainLocales,
-        isPreview = data.isPreview,
-        rsc = data.rsc;
-      var defaultLocale = data.defaultLocale;
-      var prefix = assetPrefix || "";
-      // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
-      // So, this is how we do it in the client side at runtime
-      __webpack_require__.p = "".concat(prefix, "/_next/"); //eslint-disable-line
-      // Initialize next/config with the environment configuration
-      (0, _runtimeConfig).setConfig({
-        serverRuntimeConfig: {},
-        publicRuntimeConfig: runtimeConfig || {}
-      });
-      var asPath = (0, _utils).getURL();
-      // make sure not to attempt stripping basePath for 404s
-      if ((0, _router).hasBasePath(asPath)) {
-        asPath = (0, _router).delBasePath(asPath);
-      }
-      if (false) {
-        var detectedDomain,
-          localePathResult,
-          parsedAs,
-          formatUrl,
-          parseRelativeUrl,
-          detectDomainLocale,
-          normalizeLocalePath;
-      }
-      if (data.scriptLoader) {
-        var initScriptLoader = __webpack_require__(3573) /* .initScriptLoader */
-          .z;
-        initScriptLoader(data.scriptLoader);
-      }
-      var pageLoader = new _pageLoader.default(buildId, prefix);
-      var register = function(param) {
-        var _param = _slicedToArray(param, 2),
-          r = _param[0],
-          f = _param[1];
-        return pageLoader.routeLoader.onEntrypoint(r, f);
-      };
-      if (window.__NEXT_P) {
-        // Defer page registration for another tick. This will increase the overall
-        // latency in hydrating the page, but reduce the total blocking time.
-        window.__NEXT_P.map(function(p) {
-          return setTimeout(function() {
-            return register(p);
-          }, 0);
-        });
-      }
-      window.__NEXT_P = [];
-      window.__NEXT_P.push = register;
-      var headManager = (0, _headManager).default();
-      var appElement = document.getElementById("__next");
+      var initialData;
+      var defaultLocale = undefined;
+      var asPath;
+      var pageLoader;
+      var appElement;
+      var headManager;
       var lastRenderReject;
       var webpackHMR;
-      var router;
-      exports.router = router;
       var CachedApp, onPerfEntry;
+      var CachedComponent;
       var isAppRSC;
-      headManager.getIsSsr = function() {
-        return router.isSsr;
-      };
       var Container = /*#__PURE__*/ (function(_Component) {
         _inherits(Container, _Component);
         var _super = _createSuper(Container);
@@ -729,15 +669,15 @@
               if (
                 router.isSsr && // the asPath unexpectedly e.g. adding basePath when
                 // it wasn't originally present
-                page !== "/404" &&
-                page !== "/_error" &&
-                (isFallback ||
-                  (data.nextExport &&
+                initialData.page !== "/404" &&
+                initialData.page !== "/_error" &&
+                (initialData.isFallback ||
+                  (initialData.nextExport &&
                     ((0, _isDynamic).isDynamicRoute(router.pathname) ||
                       location.search ||
                       false)) ||
-                  (hydrateProps &&
-                    hydrateProps.__N_SSG &&
+                  (initialData.props &&
+                    initialData.props.__N_SSG &&
                     (location.search || false)))
               ) {
                 // update query on mount for exported pages
@@ -761,7 +701,7 @@
                     // not shallow.
                     // Other pages (strictly updating query) happens shallowly, as data
                     // requirements would already be present.
-                    shallow: !isFallback
+                    shallow: !initialData.isFallback
                   }
                 );
               }
@@ -801,17 +741,105 @@
         ]);
         return Container;
       })(_react.default.Component);
-      var emitter = (0, _mitt).default();
-      exports.emitter = emitter;
-      var CachedComponent;
-      function initNext() {
-        return _initNext.apply(this, arguments);
+      function initialize() {
+        return _initialize.apply(this, arguments);
       }
-      function _initNext() {
-        _initNext = _asyncToGenerator(
+      function _initialize() {
+        _initialize = _asyncToGenerator(
           _runtimeJs.default.mark(function _callee() {
             var opts,
-              initialErr,
+              prefix,
+              normalizeLocalePath,
+              detectDomainLocale,
+              parseRelativeUrl,
+              formatUrl,
+              parsedAs,
+              localePathResult,
+              detectedDomain,
+              initScriptLoader,
+              register,
+              _args = arguments;
+            return _runtimeJs.default.wrap(function _callee$(_ctx) {
+              while (1)
+                switch ((_ctx.prev = _ctx.next)) {
+                  case 0:
+                    opts =
+                      _args.length > 0 && _args[0] !== void 0 ? _args[0] : {};
+                    // This makes sure this specific lines are removed in production
+                    if (false) {
+                    }
+                    initialData = JSON.parse(
+                      document.getElementById("__NEXT_DATA__").textContent
+                    );
+                    window.__NEXT_DATA__ = initialData;
+                    defaultLocale = initialData.defaultLocale;
+                    prefix = initialData.assetPrefix || "";
+                    // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
+                    // So, this is how we do it in the client side at runtime
+                    __webpack_require__.p = "".concat(prefix, "/_next/"); //eslint-disable-line
+                    // Initialize next/config with the environment configuration
+                    (0, _runtimeConfig).setConfig({
+                      serverRuntimeConfig: {},
+                      publicRuntimeConfig: initialData.runtimeConfig || {}
+                    });
+                    asPath = (0, _utils).getURL();
+                    // make sure not to attempt stripping basePath for 404s
+                    if ((0, _router).hasBasePath(asPath)) {
+                      asPath = (0, _router).delBasePath(asPath);
+                    }
+                    if (false) {
+                    }
+                    if (initialData.scriptLoader) {
+                      initScriptLoader = __webpack_require__(
+                        3573
+                      ) /* .initScriptLoader */.z;
+                      initScriptLoader(initialData.scriptLoader);
+                    }
+                    pageLoader = new _pageLoader.default(
+                      initialData.buildId,
+                      prefix
+                    );
+                    register = function(param) {
+                      var _param = _slicedToArray(param, 2),
+                        r = _param[0],
+                        f = _param[1];
+                      return pageLoader.routeLoader.onEntrypoint(r, f);
+                    };
+                    if (window.__NEXT_P) {
+                      // Defer page registration for another tick. This will increase the overall
+                      // latency in hydrating the page, but reduce the total blocking time.
+                      window.__NEXT_P.map(function(p) {
+                        return setTimeout(function() {
+                          return register(p);
+                        }, 0);
+                      });
+                    }
+                    window.__NEXT_P = [];
+                    window.__NEXT_P.push = register;
+                    headManager = (0, _headManager).default();
+                    headManager.getIsSsr = function() {
+                      return router.isSsr;
+                    };
+                    appElement = document.getElementById("__next");
+                    return _ctx.abrupt("return", {
+                      assetPrefix: prefix
+                    });
+                  case 21:
+                  case "end":
+                    return _ctx.stop();
+                }
+            }, _callee);
+          })
+        );
+        return _initialize.apply(this, arguments);
+      }
+      function hydrate(opts) {
+        return _hydrate.apply(this, arguments);
+      }
+      function _hydrate() {
+        _hydrate = _asyncToGenerator(
+          _runtimeJs.default.mark(function _callee(opts) {
+            var initialErr,
               appEntrypoint,
               app,
               mod,
@@ -819,30 +847,24 @@
               pageEntrypoint,
               isValidElementType,
               getNodeError,
-              renderCtx,
-              _args = arguments;
+              renderCtx;
             return _runtimeJs.default.wrap(
               function _callee$(_ctx) {
                 while (1)
                   switch ((_ctx.prev = _ctx.next)) {
                     case 0:
-                      opts =
-                        _args.length > 0 && _args[0] !== void 0 ? _args[0] : {};
-                      // This makes sure this specific lines are removed in production
-                      if (false) {
-                      }
-                      initialErr = hydrateErr;
-                      _ctx.prev = 3;
-                      _ctx.next = 6;
+                      initialErr = initialData.err;
+                      _ctx.prev = 1;
+                      _ctx.next = 4;
                       return pageLoader.routeLoader.whenEntrypoint("/_app");
-                    case 6:
+                    case 4:
                       appEntrypoint = _ctx.sent;
                       if (!("error" in appEntrypoint)) {
-                        _ctx.next = 9;
+                        _ctx.next = 7;
                         break;
                       }
                       throw appEntrypoint.error;
-                    case 9:
+                    case 7:
                       (app = appEntrypoint.component),
                         (mod = appEntrypoint.exports);
                       CachedApp = app;
@@ -887,30 +909,32 @@
                         // error, so we need to skip waiting for the entrypoint.
                         true
                       ) {
-                        _ctx.next = 18;
+                        _ctx.next = 16;
                         break;
                       }
                       _ctx.t0 = {
-                        error: hydrateErr
+                        error: initialData.err
                       };
-                      _ctx.next = 21;
+                      _ctx.next = 19;
                       break;
+                    case 16:
+                      _ctx.next = 18;
+                      return pageLoader.routeLoader.whenEntrypoint(
+                        initialData.page
+                      );
                     case 18:
-                      _ctx.next = 20;
-                      return pageLoader.routeLoader.whenEntrypoint(page);
-                    case 20:
                       _ctx.t0 = _ctx.sent;
-                    case 21:
+                    case 19:
                       pageEntrypoint = _ctx.t0;
                       if (!("error" in pageEntrypoint)) {
-                        _ctx.next = 24;
+                        _ctx.next = 22;
                         break;
                       }
                       throw pageEntrypoint.error;
-                    case 24:
+                    case 22:
                       CachedComponent = pageEntrypoint.component;
                       if (true) {
-                        _ctx.next = 29;
+                        _ctx.next = 27;
                         break;
                       }
                       isValidElementType = Object(
@@ -923,45 +947,45 @@
                         })()
                       );
                       if (isValidElementType(CachedComponent)) {
-                        _ctx.next = 29;
+                        _ctx.next = 27;
                         break;
                       }
                       throw new Error(
                         'The default export is not a React Component in page: "'.concat(
-                          page,
+                          initialData.page,
                           '"'
                         )
                       );
-                    case 29:
-                      _ctx.next = 34;
+                    case 27:
+                      _ctx.next = 32;
                       break;
-                    case 31:
-                      _ctx.prev = 31;
-                      _ctx.t1 = _ctx["catch"](3);
+                    case 29:
+                      _ctx.prev = 29;
+                      _ctx.t1 = _ctx["catch"](1);
                       // This catches errors like throwing in the top level of a module
                       initialErr = (0, _isError).getProperError(_ctx.t1);
-                    case 34:
+                    case 32:
                       if (false) {
                       }
                       if (!window.__NEXT_PRELOADREADY) {
-                        _ctx.next = 38;
+                        _ctx.next = 36;
                         break;
                       }
-                      _ctx.next = 38;
-                      return window.__NEXT_PRELOADREADY(dynamicIds);
-                    case 38:
+                      _ctx.next = 36;
+                      return window.__NEXT_PRELOADREADY(initialData.dynamicIds);
+                    case 36:
                       exports.router = router = (0, _router1).createRouter(
-                        page,
-                        query,
+                        initialData.page,
+                        initialData.query,
                         asPath,
                         {
-                          initialProps: hydrateProps,
+                          initialProps: initialData.props,
                           pageLoader: pageLoader,
                           App: CachedApp,
                           Component: CachedComponent,
                           wrapApp: wrapApp,
                           err: initialErr,
-                          isFallback: Boolean(isFallback),
+                          isFallback: Boolean(initialData.isFallback),
                           subscription: function(info, App, scroll) {
                             return render(
                               Object.assign({}, info, {
@@ -970,41 +994,45 @@
                               })
                             );
                           },
-                          locale: locale,
-                          locales: locales,
+                          locale: initialData.locale,
+                          locales: initialData.locales,
                           defaultLocale: defaultLocale,
-                          domainLocales: domainLocales,
-                          isPreview: isPreview,
-                          isRsc: rsc
+                          domainLocales: initialData.domainLocales,
+                          isPreview: initialData.isPreview,
+                          isRsc: initialData.rsc
                         }
                       );
                       renderCtx = {
                         App: CachedApp,
                         initial: true,
                         Component: CachedComponent,
-                        props: hydrateProps,
+                        props: initialData.props,
                         err: initialErr
                       };
-                      if (!opts.beforeRender) {
-                        _ctx.next = 43;
+                      if (
+                        !(opts === null || opts === void 0
+                          ? void 0
+                          : opts.beforeRender)
+                      ) {
+                        _ctx.next = 41;
                         break;
                       }
-                      _ctx.next = 43;
+                      _ctx.next = 41;
                       return opts.beforeRender();
-                    case 43:
+                    case 41:
                       render(renderCtx);
-                    case 44:
+                    case 42:
                     case "end":
                       return _ctx.stop();
                   }
               },
               _callee,
               null,
-              [[3, 31]]
+              [[1, 29]]
             );
           })
         );
-        return _initNext.apply(this, arguments);
+        return _hydrate.apply(this, arguments);
       }
       function render(renderingProps) {
         return _render.apply(this, arguments);
@@ -1115,8 +1143,8 @@
               router: router,
               ctx: {
                 err: err,
-                pathname: page,
-                query: query,
+                pathname: initialData.page,
+                query: initialData.query,
                 asPath: asPath,
                 AppTree: AppTree
               }
@@ -1268,7 +1296,7 @@
         return function(wrappedAppProps) {
           var appProps = _objectSpread({}, wrappedAppProps, {
             Component: CachedComponent,
-            err: hydrateErr,
+            err: initialData.err,
             router: router
           });
           return /*#__PURE__*/ _react.default.createElement(
@@ -1518,7 +1546,12 @@
         },
         emitter: _.emitter
       };
-      (0, _).initNext().catch(console.error); //# sourceMappingURL=next.js.map
+      (0, _)
+        .initialize({})
+        .then(function() {
+          return (0, _).hydrate();
+        })
+        .catch(console.error); //# sourceMappingURL=next.js.map
 
       /***/
     },

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-33a5431a1debc260.js"
+      src="/_next/static/chunks/main-821634c2510cfb09.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-33a5431a1debc260.js"
+      src="/_next/static/chunks/main-821634c2510cfb09.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-33a5431a1debc260.js"
+      src="/_next/static/chunks/main-821634c2510cfb09.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)