Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Fix metrics measurements under new root API #24110

Merged
merged 14 commits into from
Apr 20, 2021
Merged

Fix metrics measurements under new root API #24110

merged 14 commits into from
Apr 20, 2021

Conversation

devknoll
Copy link
Contributor

@devknoll devknoll commented Apr 15, 2021 •
edited
Loading

Previously, we weren't recording most (all?) of the Next.js measurements like Next.js-hydration in Concurrent Mode. This was mainly because the new API doesn't accept a callback.

Instead of special casing this, I've refactored it so that the measurements are just recorded when Root first flushes (via useLayoutEffect), which should be more or less the same timing for the old API.

Concurrent Mode is a little trickier for two reasons:

  1. Flushes might be (slightly) delayed due to time-slicing and prioritization
  2. Selective hydration might skew measurements in cases where full hydration is aborted

I don't have a good answer for those yet, so they'll need to be addressed when the time comes.

@devknoll devknoll marked this pull request as ready for review April 15, 2021 15:08
@ijjk
Copy link
Member

ijjk commented Apr 15, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 16.7s 16.8s ⚠️ +111ms
buildDurationCached 5.1s 5.1s -90ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +1.09 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 3.003 2.939 -0.06
/ avg req/sec 832.47 850.56 +18.09
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.691 1.715 ⚠️ +0.02
/error-in-render avg req/sec 1478.66 1457.5 ⚠️ -21.16
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.05 kB 7.1 kB ⚠️ +54 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +54 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 611 B 609 B -2 B
link.html gzip 616 B 615 B -1 B
withRouter.html gzip 605 B 605 B ✓
Overall change 1.83 kB 1.83 kB -3 B

Diffs

Diff for 778-HASH.js 
@@ -595,6 +595,10 @@
       exports.emitter = emitter;
       var CachedComponent;
 
+      var RootCommitCallbacksContext = /*#__PURE__*/ _react[
+        "default"
+      ].createContext([]);
+
       var _default = /*#__PURE__*/ (function() {
         var _ref3 = _asyncToGenerator(
           /*#__PURE__*/ _regeneratorRuntime.mark(function _callee() {
@@ -961,21 +965,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1242,9 +1251,7 @@
 
         var elem = /*#__PURE__*/ _react["default"].createElement(
           Root,
-          {
-            callback: onRootCommit
-          },
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1267,21 +1274,34 @@
 
         onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            RootCommitCallbacksContext.Provider,
+            {
+              value: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
-          children = _ref9.children;
+        var children = _ref9.children;
+
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
+        var callbacks = _react["default"].useContext(
+          RootCommitCallbacksContext
+        );
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      href="/_next/static/chunks/webpack-6484b99af08437482e7b.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      href="/_next/static/chunks/778-0fdfac098dc046e3ee0d.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      src="/_next/static/chunks/webpack-6484b99af08437482e7b.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      src="/_next/static/chunks/778-0fdfac098dc046e3ee0d.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      href="/_next/static/chunks/webpack-6484b99af08437482e7b.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      href="/_next/static/chunks/778-0fdfac098dc046e3ee0d.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      src="/_next/static/chunks/webpack-6484b99af08437482e7b.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      src="/_next/static/chunks/778-0fdfac098dc046e3ee0d.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      href="/_next/static/chunks/webpack-6484b99af08437482e7b.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      href="/_next/static/chunks/778-0fdfac098dc046e3ee0d.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      src="/_next/static/chunks/webpack-6484b99af08437482e7b.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      src="/_next/static/chunks/778-0fdfac098dc046e3ee0d.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 21.1s 21s -100ms
buildDurationCached 7.5s 7.5s ⚠️ +14ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +1.09 kB
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.05 kB 7.1 kB ⚠️ +54 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +54 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB ✓
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB ✓
routerDirect.js 1.44 MB 1.44 MB ✓
withRouter.js 1.44 MB 1.44 MB ⚠️ +2 B
Overall change 7.14 MB 7.14 MB ⚠️ +2 B
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 13.6s 13.9s ⚠️ +349ms
buildDurationCached 5.6s 5.6s -28ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +1.09 kB
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.973 2.991 ⚠️ +0.02
/ avg req/sec 840.83 835.87 ⚠️ -4.96
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.707 1.682 -0.03
/error-in-render avg req/sec 1464.64 1486.16 +21.52
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.12 kB 7.17 kB ⚠️ +54 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.3 kB ⚠️ +54 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
hooks-HASH.js gzip 888 B 888 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.64 kB 1.64 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
Overall change 8.89 kB 8.89 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 371 B 371 B ✓
Overall change 371 B 371 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 612 B 613 B ⚠️ +1 B
link.html gzip 620 B 620 B ✓
withRouter.html gzip 607 B 607 B ✓
Overall change 1.84 kB 1.84 kB ⚠️ +1 B

Diffs

Diff for main-HASH.js 
@@ -597,6 +597,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       exports.emitter = emitter;
       var CachedComponent;
 
+      var RootCommitCallbacksContext = /*#__PURE__*/ _react[
+        "default"
+      ].createContext([]);
+
       var _default = /*#__PURE__*/ (function() {
         var _ref3 = _asyncToGenerator(
           /*#__PURE__*/ _regeneratorRuntime.mark(function _callee() {
@@ -961,21 +965,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1242,9 +1251,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
         var elem = /*#__PURE__*/ _react["default"].createElement(
           Root,
-          {
-            callback: onRootCommit
-          },
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1267,21 +1274,34 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
         onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            RootCommitCallbacksContext.Provider,
+            {
+              value: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
-          children = _ref9.children;
+        var children = _ref9.children;
+
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
+        var callbacks = _react["default"].useContext(
+          RootCommitCallbacksContext
+        );
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      href="/_next/static/chunks/main-507f62dce1dae6baf4b7.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      src="/_next/static/chunks/main-507f62dce1dae6baf4b7.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      href="/_next/static/chunks/main-507f62dce1dae6baf4b7.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      src="/_next/static/chunks/main-507f62dce1dae6baf4b7.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      href="/_next/static/chunks/main-507f62dce1dae6baf4b7.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      src="/_next/static/chunks/main-507f62dce1dae6baf4b7.js"
       async=""
     ></script>
     <script
Commit: db17e99

@ijjk
Copy link
Member

ijjk commented Apr 15, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 11.5s 11.7s ⚠️ +157ms
buildDurationCached 3.6s 3.7s ⚠️ +41ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +583 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.072 2.102 ⚠️ +0.03
/ avg req/sec 1206.29 1189.4 ⚠️ -16.89
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.077 1.068 -0.01
/error-in-render avg req/sec 2321.88 2341.02 +19.14
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.05 kB 7.09 kB ⚠️ +40 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +40 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 611 B 610 B -1 B
link.html gzip 616 B 615 B -1 B
withRouter.html gzip 605 B 604 B -1 B
Overall change 1.83 kB 1.83 kB -3 B

Diffs

Diff for 778-HASH.js 
@@ -961,21 +961,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1240,11 +1245,11 @@
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1263,25 +1268,33 @@
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      href="/_next/static/chunks/webpack-8e0d594391fe7aa5d7b0.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      href="/_next/static/chunks/778-4c38e56bcc3addee5c0e.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      src="/_next/static/chunks/webpack-8e0d594391fe7aa5d7b0.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      src="/_next/static/chunks/778-4c38e56bcc3addee5c0e.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      href="/_next/static/chunks/webpack-8e0d594391fe7aa5d7b0.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      href="/_next/static/chunks/778-4c38e56bcc3addee5c0e.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      src="/_next/static/chunks/webpack-8e0d594391fe7aa5d7b0.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      src="/_next/static/chunks/778-4c38e56bcc3addee5c0e.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      href="/_next/static/chunks/webpack-8e0d594391fe7aa5d7b0.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      href="/_next/static/chunks/778-4c38e56bcc3addee5c0e.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-322150e38e961594c3ea.js"
+      src="/_next/static/chunks/webpack-8e0d594391fe7aa5d7b0.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-095b26960dc5dc2c0154.js"
+      src="/_next/static/chunks/778-4c38e56bcc3addee5c0e.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 14.9s 14.5s -339ms
buildDurationCached 5.3s 5.3s -17ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +583 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.05 kB 7.09 kB ⚠️ +40 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +40 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB ✓
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB ⚠️ +2 B
routerDirect.js 1.44 MB 1.44 MB ✓
withRouter.js 1.44 MB 1.44 MB ✓
Overall change 7.14 MB 7.14 MB ⚠️ +2 B
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 9.9s 10.1s ⚠️ +165ms
buildDurationCached 4.1s 4.1s -2ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +583 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.061 2.099 ⚠️ +0.04
/ avg req/sec 1212.94 1191.13 ⚠️ -21.81
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.078 1.067 -0.01
/error-in-render avg req/sec 2318.79 2342.88 +24.09
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.12 kB 7.16 kB ⚠️ +43 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.2 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
hooks-HASH.js gzip 888 B 888 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.64 kB 1.64 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
Overall change 8.89 kB 8.89 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 371 B 371 B ✓
Overall change 371 B 371 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 612 B 612 B ✓
link.html gzip 620 B 619 B -1 B
withRouter.html gzip 607 B 606 B -1 B
Overall change 1.84 kB 1.84 kB -2 B

Diffs

Diff for main-HASH.js 
@@ -961,21 +961,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1240,11 +1245,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1263,25 +1268,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      href="/_next/static/chunks/main-29e7d43468506182bcca.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      src="/_next/static/chunks/main-29e7d43468506182bcca.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      href="/_next/static/chunks/main-29e7d43468506182bcca.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      src="/_next/static/chunks/main-29e7d43468506182bcca.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      href="/_next/static/chunks/main-29e7d43468506182bcca.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c9be4a596b933a81d1b9.js"
+      src="/_next/static/chunks/main-29e7d43468506182bcca.js"
       async=""
     ></script>
     <script
Commit: 0428ec2

@ijjk
Copy link
Member

ijjk commented Apr 16, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 14.7s 14.5s -197ms
buildDurationCached 4.6s 4.4s -203ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +583 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.785 2.661 -0.12
/ avg req/sec 897.61 939.36 +41.75
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.5 1.536 ⚠️ +0.04
/error-in-render avg req/sec 1667.01 1628.02 ⚠️ -38.99
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.05 kB 7.09 kB ⚠️ +40 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +40 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 611 B 609 B -2 B
link.html gzip 616 B 615 B -1 B
withRouter.html gzip 604 B 605 B ⚠️ +1 B
Overall change 1.83 kB 1.83 kB -2 B

Diffs

Diff for 778-HASH.js 
@@ -961,21 +961,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1240,11 +1245,11 @@
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1263,25 +1268,33 @@
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-15295a88fc613ba5cbc8.js"
+      href="/_next/static/chunks/webpack-13912bf2e77401537966.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-5b575716c0bcacfbf1eb.js"
+      href="/_next/static/chunks/778-79d6522dc9009ebb2bf9.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-15295a88fc613ba5cbc8.js"
+      src="/_next/static/chunks/webpack-13912bf2e77401537966.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-5b575716c0bcacfbf1eb.js"
+      src="/_next/static/chunks/778-79d6522dc9009ebb2bf9.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-15295a88fc613ba5cbc8.js"
+      href="/_next/static/chunks/webpack-13912bf2e77401537966.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-5b575716c0bcacfbf1eb.js"
+      href="/_next/static/chunks/778-79d6522dc9009ebb2bf9.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-15295a88fc613ba5cbc8.js"
+      src="/_next/static/chunks/webpack-13912bf2e77401537966.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-5b575716c0bcacfbf1eb.js"
+      src="/_next/static/chunks/778-79d6522dc9009ebb2bf9.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-15295a88fc613ba5cbc8.js"
+      href="/_next/static/chunks/webpack-13912bf2e77401537966.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-5b575716c0bcacfbf1eb.js"
+      href="/_next/static/chunks/778-79d6522dc9009ebb2bf9.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-15295a88fc613ba5cbc8.js"
+      src="/_next/static/chunks/webpack-13912bf2e77401537966.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-5b575716c0bcacfbf1eb.js"
+      src="/_next/static/chunks/778-79d6522dc9009ebb2bf9.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 18.4s 18s -343ms
buildDurationCached 6.4s 6.5s ⚠️ +31ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +583 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.05 kB 7.09 kB ⚠️ +40 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +40 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB ✓
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB ⚠️ +2 B
routerDirect.js 1.44 MB 1.44 MB ⚠️ +2 B
withRouter.js 1.44 MB 1.44 MB ✓
Overall change 7.14 MB 7.14 MB ⚠️ +4 B
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 12.2s 12s -245ms
buildDurationCached 5s 4.9s -136ms
nodeModulesSize 46.2 MB 46.2 MB ⚠️ +583 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.617 2.661 ⚠️ +0.04
/ avg req/sec 955.32 939.47 ⚠️ -15.85
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.577 1.551 -0.03
/error-in-render avg req/sec 1585.62 1612.21 +26.59
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.12 kB 7.16 kB ⚠️ +43 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.2 kB ⚠️ +43 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
hooks-HASH.js gzip 888 B 888 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.64 kB 1.64 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
Overall change 8.89 kB 8.89 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 371 B 371 B ✓
Overall change 371 B 371 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 613 B 612 B -1 B
link.html gzip 620 B 620 B ✓
withRouter.html gzip 607 B 607 B ✓
Overall change 1.84 kB 1.84 kB -1 B

Diffs

Diff for main-HASH.js 
@@ -961,21 +961,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1240,11 +1245,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1263,25 +1268,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-68872973a2f90e2eea94.js"
+      href="/_next/static/chunks/main-982b2a3d6d0c62dcf9a9.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-68872973a2f90e2eea94.js"
+      src="/_next/static/chunks/main-982b2a3d6d0c62dcf9a9.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-68872973a2f90e2eea94.js"
+      href="/_next/static/chunks/main-982b2a3d6d0c62dcf9a9.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-68872973a2f90e2eea94.js"
+      src="/_next/static/chunks/main-982b2a3d6d0c62dcf9a9.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-68872973a2f90e2eea94.js"
+      href="/_next/static/chunks/main-982b2a3d6d0c62dcf9a9.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-68872973a2f90e2eea94.js"
+      src="/_next/static/chunks/main-982b2a3d6d0c62dcf9a9.js"
       async=""
     ></script>
     <script
Commit: 1a49aa2

@ijjk
Copy link
Member

ijjk commented Apr 19, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 12.3s 13.3s ⚠️ +965ms
buildDurationCached 3.5s 3.9s ⚠️ +332ms
nodeModulesSize 46.3 MB 46.3 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.305 2.325 ⚠️ +0.02
/ avg req/sec 1084.62 1075.19 ⚠️ -9.43
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.201 1.204 0
/error-in-render avg req/sec 2082.3 2076.27 ⚠️ -6.03
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 609 B 609 B ✓
link.html gzip 614 B 612 B -2 B
withRouter.html gzip 604 B 603 B -1 B
Overall change 1.83 kB 1.82 kB -3 B

Diffs

Diff for 778-HASH.js 
@@ -973,21 +973,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-b21d4ea84e4cd4b46d22.js"
+      href="/_next/static/chunks/webpack-a264eb3e1f5dd1c764b2.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-b21d4ea84e4cd4b46d22.js"
+      src="/_next/static/chunks/webpack-a264eb3e1f5dd1c764b2.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-b21d4ea84e4cd4b46d22.js"
+      href="/_next/static/chunks/webpack-a264eb3e1f5dd1c764b2.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-b21d4ea84e4cd4b46d22.js"
+      src="/_next/static/chunks/webpack-a264eb3e1f5dd1c764b2.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-b21d4ea84e4cd4b46d22.js"
+      href="/_next/static/chunks/webpack-a264eb3e1f5dd1c764b2.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-b21d4ea84e4cd4b46d22.js"
+      src="/_next/static/chunks/webpack-a264eb3e1f5dd1c764b2.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 15.9s 16s ⚠️ +96ms
buildDurationCached 6s 6s ⚠️ +64ms
nodeModulesSize 46.3 MB 46.3 MB ⚠️ +583 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
Overall change 9.03 kB 9.03 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 349 B 349 B ✓
Overall change 349 B 349 B ✓
Serverless bundles Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB -2 B
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB ✓
routerDirect.js 1.44 MB 1.44 MB ✓
withRouter.js 1.44 MB 1.44 MB ✓
Overall change 7.15 MB 7.15 MB -2 B
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 11s 11.1s ⚠️ +107ms
buildDurationCached 4s 4.6s ⚠️ +591ms
nodeModulesSize 46.3 MB 46.3 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.222 2.269 ⚠️ +0.05
/ avg req/sec 1124.98 1101.78 ⚠️ -23.2
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.16 1.171 ⚠️ +0.01
/error-in-render avg req/sec 2155.03 2135.35 ⚠️ -19.68
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.16 kB 7.2 kB ⚠️ +41 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.3 kB ⚠️ +41 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
hooks-HASH.js gzip 888 B 888 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.64 kB 1.64 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
Overall change 8.89 kB 8.89 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 371 B 371 B ✓
Overall change 371 B 371 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 613 B 611 B -2 B
link.html gzip 619 B 619 B ✓
withRouter.html gzip 607 B 606 B -1 B
Overall change 1.84 kB 1.84 kB -3 B

Diffs

Diff for main-HASH.js 
@@ -973,21 +973,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Commit: e70251e

@ijjk
Copy link
Member

ijjk commented Apr 19, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 13.5s 13.6s ⚠️ +142ms
buildDurationCached 4.5s 4.1s -315ms
nodeModulesSize 46.3 MB 46.3 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.32 2.455 ⚠️ +0.14
/ avg req/sec 1077.51 1018.48 ⚠️ -59.03
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.198 1.194 0
/error-in-render avg req/sec 2087.67 2094.24 +6.57
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 610 B 608 B -2 B
link.html gzip 616 B 613 B -3 B
withRouter.html gzip 605 B 603 B -2 B
Overall change 1.83 kB 1.82 kB -7 B

Diffs

Diff for 778-HASH.js 
@@ -973,21 +973,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      href="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      src="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      href="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      src="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      href="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      src="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 16.9s 16.9s ⚠️ +22ms
buildDurationCached 6.5s 6.5s -25ms
nodeModulesSize 46.3 MB 46.3 MB ⚠️ +583 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Serverless bundles
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB ✓
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
css.html 2.13 kB 2.13 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB ✓
routerDirect.js 1.44 MB 1.44 MB ✓
withRouter.js 1.44 MB 1.44 MB ✓
Overall change 7.15 MB 7.15 MB ✓
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 11.2s 11.8s ⚠️ +542ms
buildDurationCached 4.7s 4.7s -32ms
nodeModulesSize 46.3 MB 46.3 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.307 2.298 -0.01
/ avg req/sec 1083.52 1088.11 +4.59
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.197 1.231 ⚠️ +0.03
/error-in-render avg req/sec 2088.01 2031.67 ⚠️ -56.34
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.16 kB 7.2 kB ⚠️ +41 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.3 kB ⚠️ +41 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
css-HASH.js gzip 339 B 339 B ✓
hooks-HASH.js gzip 887 B 887 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.65 kB 1.65 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
21c68fa65a48..217.css gzip 125 B 125 B ✓
Overall change 9.36 kB 9.36 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 419 B 419 B ✓
Overall change 419 B 419 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 612 B 611 B -1 B
link.html gzip 619 B 619 B ✓
withRouter.html gzip 606 B 605 B -1 B
Overall change 1.84 kB 1.83 kB -2 B

Diffs

Diff for main-HASH.js 
@@ -973,21 +973,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Commit: ccfb0c4

@ijjk
Copy link
Member

ijjk commented Apr 19, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 14.5s 14.7s ⚠️ +277ms
buildDurationCached 4.7s 4.7s -24ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.501 2.625 ⚠️ +0.12
/ avg req/sec 999.45 952.31 ⚠️ -47.14
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.451 1.504 ⚠️ +0.05
/error-in-render avg req/sec 1723.4 1661.93 ⚠️ -61.47
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 610 B 608 B -2 B
link.html gzip 616 B 613 B -3 B
withRouter.html gzip 605 B 603 B -2 B
Overall change 1.83 kB 1.82 kB -7 B

Diffs

Diff for 778-HASH.js 
@@ -973,21 +973,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      href="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      src="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      href="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      src="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      href="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      href="/_next/static/chunks/778-3817807821231dafe2ed.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-92877585d3dddee55fa0.js"
+      src="/_next/static/chunks/webpack-75763b99a04c5c1e1409.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-ee4f51beee6cb83ffb74.js"
+      src="/_next/static/chunks/778-3817807821231dafe2ed.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 17.6s 18.7s ⚠️ +1s
buildDurationCached 6.6s 6.6s -28ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Serverless bundles
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB ✓
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
css.html 2.13 kB 2.13 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB ✓
routerDirect.js 1.44 MB 1.44 MB ✓
withRouter.js 1.44 MB 1.44 MB ✓
Overall change 7.15 MB 7.15 MB ✓
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 12.1s 12.1s -3ms
buildDurationCached 5.1s 5s -116ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.499 2.499 ✓
/ avg req/sec 1000.3 1000.57 +0.27
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.434 1.449 ⚠️ +0.02
/error-in-render avg req/sec 1743.38 1724.8 ⚠️ -18.58
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.16 kB 7.2 kB ⚠️ +41 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.3 kB ⚠️ +41 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
css-HASH.js gzip 339 B 339 B ✓
hooks-HASH.js gzip 887 B 887 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.65 kB 1.65 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
21c68fa65a48..217.css gzip 125 B 125 B ✓
Overall change 9.36 kB 9.36 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 419 B 419 B ✓
Overall change 419 B 419 B ✓
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 612 B 611 B -1 B
link.html gzip 619 B 619 B ✓
withRouter.html gzip 606 B 605 B -1 B
Overall change 1.84 kB 1.83 kB -2 B

Diffs

Diff for main-HASH.js 
@@ -973,21 +973,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      href="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-72769db21651fd7c53f3.js"
+      src="/_next/static/chunks/main-e775eff86e0f8e3dc4ba.js"
       async=""
     ></script>
     <script
Commit: a24145b

ijjk
ijjk approved these changes Apr 20, 2021
View reviewed changes
Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change looks good, @devknoll looks like you'll need to merge canary manually again before this is able to be merged

@ijjk
Copy link
Member

ijjk commented Apr 20, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 15.1s 15.2s ⚠️ +93ms
buildDurationCached 4.7s 4.7s -24ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.653 2.544 -0.11
/ avg req/sec 942.35 982.64 +40.29
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.455 1.481 ⚠️ +0.03
/error-in-render avg req/sec 1718.66 1688.6 ⚠️ -30.06
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 609 B 611 B ⚠️ +2 B
link.html gzip 614 B 616 B ⚠️ +2 B
withRouter.html gzip 603 B 605 B ⚠️ +2 B
Overall change 1.83 kB 1.83 kB ⚠️ +6 B

Diffs

Diff for 778-HASH.js 
@@ -973,21 +973,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      href="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      href="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      src="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      src="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      href="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      href="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      src="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      src="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      href="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      href="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      src="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      src="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 17.9s 18.3s ⚠️ +331ms
buildDurationCached 6.6s 6.8s ⚠️ +154ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB ✓
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
css.html 2.13 kB 2.13 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB ⚠️ +2 B
routerDirect.js 1.44 MB 1.44 MB ✓
withRouter.js 1.44 MB 1.44 MB ⚠️ +2 B
Overall change 7.15 MB 7.15 MB ⚠️ +4 B
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 12.2s 12.6s ⚠️ +383ms
buildDurationCached 5.2s 5.4s ⚠️ +197ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.602 2.649 ⚠️ +0.05
/ avg req/sec 960.87 943.89 ⚠️ -16.98
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.473 1.504 ⚠️ +0.03
/error-in-render avg req/sec 1697.71 1661.72 ⚠️ -35.99
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.16 kB 7.2 kB ⚠️ +41 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.3 kB ⚠️ +41 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
css-HASH.js gzip 339 B 339 B ✓
hooks-HASH.js gzip 887 B 887 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.65 kB 1.65 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
21c68fa65a48..217.css gzip 125 B 125 B ✓
Overall change 9.36 kB 9.36 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 419 B 419 B ✓
Overall change 419 B 419 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 612 B 613 B ⚠️ +1 B
link.html gzip 619 B 619 B ✓
withRouter.html gzip 606 B 606 B ✓
Overall change 1.84 kB 1.84 kB ⚠️ +1 B

Diffs

Diff for main-HASH.js 
@@ -973,21 +973,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      href="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      src="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      href="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      src="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      href="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      src="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       async=""
     ></script>
     <script
Commit: d5148f2

@ijjk
Copy link
Member

ijjk commented Apr 20, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 14.9s 15s ⚠️ +80ms
buildDurationCached 4.9s 4.6s -284ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.559 2.614 ⚠️ +0.05
/ avg req/sec 977.05 956.25 ⚠️ -20.8
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.496 1.507 ⚠️ +0.01
/error-in-render avg req/sec 1671.49 1659.4 ⚠️ -12.09
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 609 B 611 B ⚠️ +2 B
link.html gzip 614 B 616 B ⚠️ +2 B
withRouter.html gzip 603 B 605 B ⚠️ +2 B
Overall change 1.83 kB 1.83 kB ⚠️ +6 B

Diffs

Diff for 778-HASH.js 
@@ -973,21 +973,26 @@
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ 0 : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ 0 : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      href="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      href="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      src="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      src="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      href="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      href="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      src="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       async=""
     ></script>
     <script
@@ -75,7 +75,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      src="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      href="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       as="script"
     />
     <link
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      href="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dfaab4ef283e6354d670.js"
+      src="/_next/static/chunks/webpack-3b6d796c1f0af25afb65.js"
       async=""
     ></script>
     <script
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/778-c0d3b055d220a8b0b452.js"
+      src="/_next/static/chunks/778-e89e6b9d1df51cb79258.js"
       async=""
     ></script>
     <script
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 18.5s 18.2s -312ms
buildDurationCached 6.8s 6.8s -40ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
597-HASH.js gzip 13.3 kB 13.3 kB ✓
778-HASH.js gzip 7.08 kB 7.12 kB ⚠️ +38 B
framework-HASH.js gzip 39.3 kB 39.3 kB ✓
main-HASH.js gzip 151 B 151 B ✓
webpack-HASH.js gzip 993 B 993 B ✓
Overall change 60.8 kB 60.8 kB ⚠️ +38 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB ✓
Overall change 31.1 kB 31.1 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.3 kB 1.3 kB ✓
_error-HASH.js gzip 3.68 kB 3.68 kB ✓
amp-HASH.js gzip 558 B 558 B ✓
css-HASH.js gzip 363 B 363 B ✓
hooks-HASH.js gzip 924 B 924 B ✓
index-HASH.js gzip 243 B 243 B ✓
link-HASH.js gzip 1.66 kB 1.66 kB ✓
routerDirect..HASH.js gzip 336 B 336 B ✓
withRouter-HASH.js gzip 334 B 334 B ✓
99a142a5cfae..804.css gzip 125 B 125 B ✓
Overall change 9.52 kB 9.52 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 390 B 390 B ✓
Overall change 390 B 390 B ✓
Serverless bundles
vercel/next.js canary azukaru/next.js render-callback-context Change
_error.js 1.39 MB 1.39 MB ⚠️ +2 B
404.html 2.76 kB 2.76 kB ✓
500.html 2.75 kB 2.75 kB ✓
amp.amp.html 10.7 kB 10.7 kB ✓
amp.html 1.96 kB 1.96 kB ✓
css.html 2.13 kB 2.13 kB ✓
hooks.html 2.01 kB 2.01 kB ✓
index.js 1.39 MB 1.39 MB ✓
link.js 1.45 MB 1.45 MB -2 B
routerDirect.js 1.44 MB 1.44 MB ✓
withRouter.js 1.44 MB 1.44 MB ✓
Overall change 7.15 MB 7.15 MB ✓
Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
buildDuration 12.2s 12.2s ⚠️ +2ms
buildDurationCached 5.3s 5.1s -277ms
nodeModulesSize 46.6 MB 46.6 MB ⚠️ +583 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.65 2.614 -0.04
/ avg req/sec 943.29 956.34 +13.05
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.476 1.513 ⚠️ +0.04
/error-in-render avg req/sec 1694.21 1652.01 ⚠️ -42.2
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
677f882d2ed8..HASH.js gzip 13.4 kB 13.4 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-HASH.js gzip 7.16 kB 7.2 kB ⚠️ +41 B
webpack-HASH.js gzip 751 B 751 B ✓
Overall change 60.2 kB 60.3 kB ⚠️ +41 B
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js render-callback-context Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB ✓
Overall change 31.3 kB 31.3 kB ✓
Client Pages
vercel/next.js canary azukaru/next.js render-callback-context Change
_app-HASH.js gzip 1.28 kB 1.28 kB ✓
_error-HASH.js gzip 3.71 kB 3.71 kB ✓
amp-HASH.js gzip 536 B 536 B ✓
css-HASH.js gzip 339 B 339 B ✓
hooks-HASH.js gzip 887 B 887 B ✓
index-HASH.js gzip 227 B 227 B ✓
link-HASH.js gzip 1.65 kB 1.65 kB ✓
routerDirect..HASH.js gzip 303 B 303 B ✓
withRouter-HASH.js gzip 302 B 302 B ✓
21c68fa65a48..217.css gzip 125 B 125 B ✓
Overall change 9.36 kB 9.36 kB ✓
Client Build Manifests
vercel/next.js canary azukaru/next.js render-callback-context Change
_buildManifest.js gzip 419 B 419 B ✓
Overall change 419 B 419 B ✓
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary azukaru/next.js render-callback-context Change
index.html gzip 612 B 613 B ⚠️ +1 B
link.html gzip 619 B 619 B ✓
withRouter.html gzip 606 B 606 B ✓
Overall change 1.84 kB 1.84 kB ⚠️ +1 B

Diffs

Diff for main-HASH.js 
@@ -973,21 +973,26 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
       var reactRoot = null;
       var shouldUseHydrate = typeof _reactDom["default"].hydrate === "function";
 
-      function renderReactElement(reactEl, domEl) {
+      function renderReactElement(domEl, fn) {
+        // mark start of hydrate/render
+        if (_utils.ST) {
+          performance.mark("beforeRender");
+        }
+
+        var reactEl = fn(
+          shouldUseHydrate ? markHydrateComplete : markRenderComplete
+        );
+
         if (false) {
           var opts;
         } else {
-          // mark start of hydrate/render
-          if (_utils.ST) {
-            performance.mark("beforeRender");
-          } // The check for `.hydrate` is there to support React alternatives like preact
-
+          // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldUseHydrate) {
-            _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
+            _reactDom["default"].hydrate(reactEl, domEl);
 
             shouldUseHydrate = false;
           } else {
-            _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+            _reactDom["default"].render(reactEl, domEl);
           }
         }
       }
@@ -1252,11 +1257,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           resolvePromise();
         }
 
+        onStart();
+
         var elem = /*#__PURE__*/ _react["default"].createElement(
-          Root,
-          {
-            callback: onRootCommit
-          },
+          _react["default"].Fragment,
+          null,
           /*#__PURE__*/ _react["default"].createElement(Head, {
             callback: onHeadCommit
           }),
@@ -1275,25 +1280,33 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               )
             )
           )
-        );
-
-        onStart(); // We catch runtime errors using componentDidCatch which will trigger renderError
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
+        renderReactElement(appElement, function(callback) {
+          return /*#__PURE__*/ _react["default"].createElement(
+            Root,
+            {
+              callbacks: [callback, onRootCommit]
+            },
+            false ? /*#__PURE__*/ undefined : elem
+          );
+        });
         return renderPromise;
       }
 
       function Root(_ref9) {
-        var callback = _ref9.callback,
+        var callbacks = _ref9.callbacks,
           children = _ref9.children;
 
-        // We use `useLayoutEffect` to guarantee the callback is executed
-        // as soon as React flushes the update.
+        // We use `useLayoutEffect` to guarantee the callbacks are executed
+        // as soon as React flushes the update
         _react["default"].useLayoutEffect(
           function() {
-            return callback();
+            return callbacks.forEach(function(callback) {
+              return callback();
+            });
           },
-          [callback]
+          [callbacks]
         );
 
         if (undefined) {
Diff for index.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      href="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      src="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       async=""
     ></script>
     <script
Diff for link.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      href="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      src="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       async=""
     ></script>
     <script
Diff for withRouter.html 
@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      href="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-dff5fa055162277ec417.js"
+      src="/_next/static/chunks/main-c85e3ea1e07214e1821c.js"
       async=""
     ></script>
     <script
Commit: e7c778e

@kodiakhq kodiakhq bot merged commit 1f5f0d3 into vercel:canary Apr 20, 2021
SokratisVidros pushed a commit to SokratisVidros/next.js that referenced this pull request Apr 21, 2021
@devknoll @SokratisVidros
Fix metrics measurements under new root API (vercel#24110)
283a730 
Previously, we weren't recording most (all?) of the Next.js measurements like `Next.js-hydration` in Concurrent Mode. This was mainly because the new API doesn't accept a callback.

Instead of special casing this, I've refactored it so that the measurements are just recorded when Root first flushes (via `useLayoutEffect`), which should be more or less the same timing for the old API.

Concurrent Mode is a little trickier for two reasons:

1. Flushes might be (slightly) delayed due to time-slicing and prioritization
2. Selective hydration might skew measurements in cases where full hydration is aborted

I don't have a good answer for those yet, so they'll need to be addressed when the time comes.
@sync-by-unito sync-by-unito bot mentioned this pull request May 18, 2021
Closed
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk ijjk approved these changes

@timneutkens timneutkens timneutkens approved these changes

@divmain divmain Awaiting requested review from divmain

@lfades lfades Awaiting requested review from lfades

@shuding shuding Awaiting requested review from shuding

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

Successfully merging this pull request may close these issues.
3 participants
@devknoll @ijjk @timneutkens