Error on suspense in blocking rendering mode #28117

huozhi · 2021-08-14T15:43:12Z

Follow up of #27611, fully disable suspense option of next/dynamic in block rendering mode. concurrentFeatures flag is required to be enabled

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes

huozhi · 2021-08-15T04:00:47Z

packages/next/shared/lib/loadable.js

  if (opts.suspense) {
-    opts.lazy = React.lazy(opts.loader)
+    lazyComponent = React.lazy(opts.loader)
+    return LazyImpl


feel like we don't really need this option in next/dynamic if it only supports concurrent mode? dynamic(loader, {suspense: true}) equals React.lazy(loader). thoughts? @shuding @devknoll

ijjk · 2021-08-15T04:09:17Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
buildDuration	11.4s	11.5s	⚠️ +121ms
buildDurationCached	2.9s	2.8s	-30ms
nodeModulesSize	49.1 MB	49.1 MB	-710 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.318	2.259	-0.06
/ avg req/sec	1078.64	1106.72	+28.08
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.244	1.254	⚠️ +0.01
/error-in-render avg req/sec	2009.3	1992.94	⚠️ -16.36

Client Bundles (main, webpack, commons)

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.1 kB	23.1 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	67 kB	67 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
_app-HASH.js gzip	980 B	980 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.64 kB	2.61 kB	-30 B
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	904 B	904 B	✓
image-HASH.js gzip	4.13 kB	4.13 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	12.9 kB	12.9 kB	-30 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
_buildManifest.js gzip	491 B	490 B	-1 B
Overall change	491 B	490 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
index.html gzip	540 B	540 B	✓
link.html gzip	552 B	552 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Diffs

Diff for _buildManifest.js

@@ -10,7 +10,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-979928a4957344dd4cfa.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-cfe35dffa9e5283a3e13.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-4cb8848991d42f674567.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-b93e7fccd3af1c72154e.js"],
   "/hooks": [

Diff for dynamic-HASH.js

@@ -129,16 +129,11 @@
         );
         var suspenseOptions = loadableOptions;
 
-        if (true) {
-          // Error if react root is not enabled and `suspense` option is set to true
-          if (true && suspenseOptions.suspense) {
-            // TODO: add error doc when this feature is stable
-            throw new Error(
-              "Disallowed suspense option usage with next/dynamic in blocking mode"
-            );
-          }
-
-          suspenseOptions.suspense = false;
+        if (true && suspenseOptions.suspense) {
+          // TODO: add error doc when this feature is stable
+          throw new Error(
+            "Disallowed suspense option usage with next/dynamic in blocking mode"
+          );
         }
 
         if (suspenseOptions.suspense) {
@@ -207,12 +202,12 @@
     ) {
       "use strict";
 
+      var _defineProperty = __webpack_require__(9713);
+
       var _classCallCheck = __webpack_require__(4575);
 
       var _createClass = __webpack_require__(3913);
 
-      var _defineProperty = __webpack_require__(9713);
-
       function ownKeys(object, enumerableOnly) {
         var keys = Object.keys(object);
         if (Object.getOwnPropertySymbols) {
@@ -386,9 +381,15 @@
           },
           options
         );
+        var lazyComponent;
 
         if (opts.suspense) {
-          opts.lazy = _react["default"].lazy(opts.loader);
+          lazyComponent = _react["default"].lazy(opts.loader);
+          return LazyImpl;
+        }
+
+        function LazyImpl(props) {
+          return _react["default"].createElement(lazyComponent, props);
         }
 
         var subscription = null;
@@ -414,8 +415,7 @@
           !initialized &&
           true &&
           typeof opts.webpack === "function" &&
-          "function" === "function" &&
-          !opts.suspense
+          "function" === "function"
         ) {
           var moduleIds = opts.webpack();
           READY_INITIALIZERS.push(function(ids) {
@@ -486,23 +486,10 @@
           );
         }
 
-        function LazyImpl(props, ref) {
-          return _react["default"].createElement(
-            opts.lazy,
-            _objectSpread(
-              _objectSpread({}, props),
-              {},
-              {
-                ref: ref
-              }
-            )
-          );
-        }
-
-        var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
+        var LoadableComponent = LoadableImpl;
 
         LoadableComponent.preload = function() {
-          return !opts.suspense && init();
+          return init();
         };
 
         LoadableComponent.displayName = "LoadableComponent";

Webpack 4 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
buildDuration	9.3s	9.3s	-16ms
buildDurationCached	3.9s	3.9s	-23ms
nodeModulesSize	49.1 MB	49.1 MB	-710 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.273	2.251	-0.02
/ avg req/sec	1099.96	1110.81	+10.85
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.244	1.247	0
/error-in-render avg req/sec	2009.28	2004.93	⚠️ -4.35

Client Bundles (main, webpack, commons)

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
16.HASH.js gzip	186 B	186 B	✓
677f882d2ed8..HASH.js gzip	14 kB	14 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	67.9 kB	67.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
_app-HASH.js gzip	965 B	965 B	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.83 kB	2.8 kB	-29 B
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.95 kB	2.95 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.8 kB	17.8 kB	-29 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
_buildManifest.js gzip	497 B	498 B	⚠️ +1 B
Overall change	497 B	498 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js error-blocking-suspense	Change
index.html gzip	585 B	585 B	✓
link.html gzip	598 B	598 B	✓
withRouter.html gzip	579 B	579 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for _buildManifest.js

@@ -10,7 +10,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fcss-0fc40b547d044664b6a0.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-03610522cdfd6f22239b.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-93d6281d6353ac21ef21.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-abecfbe6a75f8cfa32c0.js"],
   "/hooks": [

Diff for dynamic-HASH.js

@@ -4,12 +4,12 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
     /***/ O4nQ: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
+      var _defineProperty = __webpack_require__("lSNA");
+
       var _classCallCheck = __webpack_require__("lwsE");
 
       var _createClass = __webpack_require__("W8MJ");
 
-      var _defineProperty = __webpack_require__("lSNA");
-
       function ownKeys(object, enumerableOnly) {
         var keys = Object.keys(object);
         if (Object.getOwnPropertySymbols) {
@@ -183,9 +183,15 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           },
           options
         );
+        var lazyComponent;
 
         if (opts.suspense) {
-          opts.lazy = _react["default"].lazy(opts.loader);
+          lazyComponent = _react["default"].lazy(opts.loader);
+          return LazyImpl;
+        }
+
+        function LazyImpl(props) {
+          return _react["default"].createElement(lazyComponent, props);
         }
 
         var subscription = null;
@@ -211,8 +217,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           !initialized &&
           true &&
           typeof opts.webpack === "function" &&
-          "function" === "function" &&
-          !opts.suspense
+          "function" === "function"
         ) {
           var moduleIds = opts.webpack();
           READY_INITIALIZERS.push(function(ids) {
@@ -283,23 +288,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           );
         }
 
-        function LazyImpl(props, ref) {
-          return _react["default"].createElement(
-            opts.lazy,
-            _objectSpread(
-              _objectSpread({}, props),
-              {},
-              {
-                ref: ref
-              }
-            )
-          );
-        }
-
-        var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
+        var LoadableComponent = LoadableImpl;
 
         LoadableComponent.preload = function() {
-          return !opts.suspense && init();
+          return init();
         };
 
         LoadableComponent.displayName = "LoadableComponent";
@@ -767,16 +759,11 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         );
         var suspenseOptions = loadableOptions;
 
-        if (true) {
-          // Error if react root is not enabled and `suspense` option is set to true
-          if (true && suspenseOptions.suspense) {
-            // TODO: add error doc when this feature is stable
-            throw new Error(
-              "Disallowed suspense option usage with next/dynamic in blocking mode"
-            );
-          }
-
-          suspenseOptions.suspense = false;
+        if (true && suspenseOptions.suspense) {
+          // TODO: add error doc when this feature is stable
+          throw new Error(
+            "Disallowed suspense option usage with next/dynamic in blocking mode"
+          );
         }
 
         if (suspenseOptions.suspense) {

Commit: 3fa0a52

Do not fallback to loadable component when `reactRoot` is enabled but without `concurrentFeatures`. Thus we can enable pure client suspense: `fallback` is always rendered on server side, but client side can work with fully functional suspense. Closes #28117

Error on suspense in blocking rendering mode

5b12dd5

huozhi requested review from ijjk, padmaia, shuding, styfle and timneutkens as code owners August 14, 2021 15:43

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Aug 14, 2021

huozhi requested a review from devknoll August 14, 2021 15:43

This comment has been minimized.

Sign in to view

devknoll previously approved these changes Aug 14, 2021

View reviewed changes

huozhi dismissed devknoll’s stale review via 5b85297 August 15, 2021 03:51

simplify loadable component

3fa0a52

huozhi force-pushed the error-blocking-suspense branch from 5b85297 to 3fa0a52 Compare August 15, 2021 04:00

huozhi commented Aug 15, 2021

View reviewed changes

huozhi marked this pull request as draft August 16, 2021 09:09

huozhi mentioned this pull request Aug 16, 2021

Enable pure client suspense in blocking rendering #28165

Merged

kodiakhq bot closed this in #28165 Aug 16, 2021

huozhi deleted the error-blocking-suspense branch August 16, 2021 15:08

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error on suspense in blocking rendering mode #28117

Error on suspense in blocking rendering mode #28117

huozhi commented Aug 14, 2021

This comment has been minimized.

huozhi Aug 15, 2021

ijjk commented Aug 15, 2021

Diffs

Diffs

Error on suspense in blocking rendering mode #28117

Error on suspense in blocking rendering mode #28117

Conversation

huozhi commented Aug 14, 2021

Bug

Feature

Documentation / Examples

This comment has been minimized.

huozhi Aug 15, 2021

Choose a reason for hiding this comment

ijjk commented Aug 15, 2021

Stats from current PR

Diffs

Diffs