Enable pure client suspense in blocking rendering #28165

huozhi · 2021-08-16T13:25:49Z

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

huozhi · 2021-08-16T13:29:43Z

test/integration/react-18/test/blocking.js

-    expect(
-      JSON.parse($('#__NEXT_DATA__').text()).dynamicIds
-    ).not.toBeUndefined()
+    expect(JSON.parse($('#__NEXT_DATA__').text()).dynamicIds).toBeUndefined()


the only core change is here, using suspense + react.lazy won't have preload ids like loadable components.

huozhi · 2021-08-16T13:30:02Z

test/integration/react-18/test/index.test.js

@@ -186,3 +194,8 @@ function runTests(name, mode, fn) {
    fn(context)
  })
 }
+
+function runTests(name, fn) {


other test changes are just reflected to this simplification

ijjk · 2021-08-16T14:45:45Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
buildDuration	12.3s	12.4s	⚠️ +100ms
buildDurationCached	3.1s	3s	-87ms
nodeModulesSize	49.1 MB	49.1 MB	-111 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.549	2.343	-0.21
/ avg req/sec	980.64	1067.06	+86.42
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.384	1.346	-0.04
/error-in-render avg req/sec	1805.86	1857.08	+51.22

Client Bundles (main, webpack, commons)

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	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 rm-dynamic-suspense-fallback	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 rm-dynamic-suspense-fallback	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.64 kB	-6 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	-6 B

Client Build Manifests

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
_buildManifest.js gzip	491 B	491 B	✓
Overall change	491 B	491 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
index.html gzip	540 B	540 B	✓
link.html gzip	551 B	551 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-383068a57a265c415ff4.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-b93e7fccd3af1c72154e.js"],
   "/hooks": [

Diff for dynamic-HASH.js

@@ -137,8 +137,6 @@
               "Disallowed suspense option usage with next/dynamic in blocking mode"
             );
           }
-
-          suspenseOptions.suspense = false;
         }
 
         if (suspenseOptions.suspense) {

Webpack 4 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
buildDuration	10s	9.6s	-406ms
buildDurationCached	4.3s	4s	-242ms
nodeModulesSize	49.1 MB	49.1 MB	-111 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.443	2.407	-0.04
/ avg req/sec	1023.5	1038.83	+15.33
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.413	1.331	-0.08
/error-in-render avg req/sec	1769.23	1878.44	+109.21

Client Bundles (main, webpack, commons)

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	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 rm-dynamic-suspense-fallback	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 rm-dynamic-suspense-fallback	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.83 kB	-5 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	-5 B

Client Build Manifests

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
_buildManifest.js gzip	498 B	498 B	✓
Overall change	498 B	498 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js rm-dynamic-suspense-fallback	Change
index.html gzip	584 B	584 B	✓
link.html gzip	596 B	596 B	✓
withRouter.html gzip	578 B	578 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-bc42be0e3170a6f93209.js"
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-abecfbe6a75f8cfa32c0.js"],
   "/hooks": [

Diff for dynamic-HASH.js

@@ -775,8 +775,6 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               "Disallowed suspense option usage with next/dynamic in blocking mode"
             );
           }
-
-          suspenseOptions.suspense = false;
         }
 
         if (suspenseOptions.suspense) {

Commit: 9969de9

## Documentation / Examples - [x] Make sure the linting passes - [x] Errors have helpful link attached, see `contributing.md` (for #28165, #27611) - [x] Update test case

Enable pure client suspense in blocking rendering

81d198f

huozhi requested review from ijjk, padmaia, shuding, styfle and timneutkens as code owners August 16, 2021 13:25

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

huozhi requested a review from devknoll August 16, 2021 13:25

huozhi commented Aug 16, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

fix lint

6c9fe69

This comment has been minimized.

Sign in to view

shuding approved these changes Aug 16, 2021

View reviewed changes

Merge branch 'canary' into rm-dynamic-suspense-fallback

9969de9

ijjk approved these changes Aug 16, 2021

View reviewed changes

kodiakhq bot merged commit 5313426 into vercel:canary Aug 16, 2021

huozhi deleted the rm-dynamic-suspense-fallback branch August 16, 2021 15:08

huozhi mentioned this pull request Aug 17, 2021

Document usage of suspense option of next/dynamic #28210

Merged

3 tasks

This was referenced Sep 1, 2021

chore(deps): bump next from 11.1.0 to 11.1.1 filecoin-project/slate#916

Closed

chore(deps): bump next from 11.1.0 to 11.1.2 filecoin-project/slate#917

Closed

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

Enable pure client suspense in blocking rendering #28165

Enable pure client suspense in blocking rendering #28165

huozhi commented Aug 16, 2021

huozhi Aug 16, 2021

huozhi Aug 16, 2021

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 16, 2021

Diffs

Diffs

Enable pure client suspense in blocking rendering #28165

Enable pure client suspense in blocking rendering #28165

Conversation

huozhi commented Aug 16, 2021

huozhi Aug 16, 2021

Choose a reason for hiding this comment

huozhi Aug 16, 2021

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 16, 2021

Stats from current PR

Diffs

Diffs