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.

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

Enable pure client suspense in blocking rendering #28165

Merged
merged 3 commits into from Aug 16, 2021

Conversation

huozhi
Copy link
Member

@huozhi huozhi commented Aug 16, 2021

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

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Aug 16, 2021
@huozhi huozhi requested a review from devknoll Aug 16, 2021
expect(
JSON.parse($('#__NEXT_DATA__').text()).dynamicIds
).not.toBeUndefined()
expect(JSON.parse($('#__NEXT_DATA__').text()).dynamicIds).toBeUndefined()
Copy link
Member Author

@huozhi huozhi Aug 16, 2021

Choose a reason for hiding this comment

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

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

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

function runTests(name, fn) {
Copy link
Member Author

@huozhi huozhi Aug 16, 2021

Choose a reason for hiding this comment

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

other test changes are just reflected to this simplification

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Aug 16, 2021

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

ijjk
ijjk approved these changes Aug 16, 2021
@kodiakhq kodiakhq bot merged commit 5313426 into vercel:canary Aug 16, 2021
32 checks passed
@huozhi huozhi deleted the rm-dynamic-suspense-fallback branch Aug 16, 2021
kodiakhq bot pushed a commit that referenced this pull request Aug 18, 2021
## Documentation / Examples

- [x] Make sure the linting passes
- [x] Errors have helpful link attached, see `contributing.md` (for #28165, #27611)
- [x] Update test case
@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.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants