Remove missingSuspenseWithCSRBailout config by huozhi · Pull Request #65688 · vercel/next.js

huozhi · 2024-05-13T09:55:23Z

What

Remove missingSuspenseWithCSRBailout and always treate the conditions where it was used as true.

Why

This was an intended behavior introduced in 14.1, which requires users to always add suspense boundaries if it's using any hook that could bail out to client rendering. missingSuspenseWithCSRBailout as true was the default behavior and you could disable it with missingSuspenseWithCSRBailout: false in next config. Now after the removal you will not be able to opt-out it.

ijjk · 2024-05-13T09:58:40Z

Tests Passed

ijjk · 2024-05-13T10:11:15Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
buildDuration	19.5s	18s	N/A
buildDurationCached	10.6s	9.6s	N/A
nodeModulesSize	345 MB	345 MB	N/A
nextStartRea..uration (ms)	453ms	455ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
2262-HASH.js gzip	5.06 kB	5.06 kB	✓
69089819-HASH.js gzip	50.8 kB	50.8 kB	N/A
7522.HASH.js gzip	169 B	169 B	✓
9921-HASH.js gzip	33.6 kB	33.6 kB	N/A
framework-HASH.js gzip	55.8 kB	55.8 kB	N/A
main-app-HASH.js gzip	228 B	228 B	✓
main-HASH.js gzip	32.3 kB	32.3 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.7 kB	N/A
Overall change	5.45 kB	5.45 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
_app-HASH.js gzip	191 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	510 B	511 B	N/A
css-HASH.js gzip	341 B	342 B	N/A
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
edge-ssr-HASH.js gzip	266 B	265 B	N/A
head-HASH.js gzip	365 B	365 B	✓
hooks-HASH.js gzip	392 B	392 B	✓
image-HASH.js gzip	4.27 kB	4.27 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.69 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	327 B	329 B	N/A
script-HASH.js gzip	392 B	396 B	N/A
withRouter-HASH.js gzip	324 B	324 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	4.17 kB	4.17 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
_buildManifest.js gzip	484 B	486 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
index.html gzip	522 B	522 B	✓
link.html gzip	537 B	537 B	✓
withRouter.html gzip	517 B	518 B	N/A
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
edge-ssr.js gzip	120 kB	120 kB	N/A
page.js gzip	180 kB	180 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
middleware-b..fest.js gzip	663 B	660 B	N/A
middleware-r..fest.js gzip	156 B	156 B	✓
middleware.js gzip	26 kB	26 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	995 B	995 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
app-page-exp...dev.js gzip	174 kB	174 kB	N/A
app-page-exp..prod.js gzip	106 kB	106 kB	N/A
app-page-tur..prod.js gzip	115 kB	115 kB	N/A
app-page-tur..prod.js gzip	95 kB	94.9 kB	N/A
app-page.run...dev.js gzip	160 kB	160 kB	N/A
app-page.run..prod.js gzip	93.6 kB	93.6 kB	N/A
app-route-ex...dev.js gzip	20.9 kB	20.9 kB	✓
app-route-ex..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	14.8 kB	14.8 kB	✓
app-route.ru...dev.js gzip	20.7 kB	20.7 kB	✓
app-route.ru..prod.js gzip	14.8 kB	14.8 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.5 kB	21.5 kB	✓
pages.runtim...dev.js gzip	22 kB	22 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	51.8 kB	51.7 kB	N/A
Overall change	195 kB	195 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js huozhi/drop-missingSuspenseWithCSRBailout-flag	Change
0.pack gzip	1.64 MB	1.64 MB	⚠️ +1.91 kB
index.pack gzip	125 kB	126 kB	⚠️ +849 B
Overall change	1.77 MB	1.77 MB	⚠️ +2.76 kB

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 5497: /***/ (
+    /***/ 2307: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(7374);
+          return __webpack_require__(6812);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3508: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6470: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(5439)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8279)
+        __webpack_require__(5691)
       );
-      const _getimgprops = __webpack_require__(1598);
-      const _imageconfig = __webpack_require__(134);
-      const _imageconfigcontextsharedruntime = __webpack_require__(7837);
-      const _warnonce = __webpack_require__(8099);
-      const _routercontextsharedruntime = __webpack_require__(7475);
+      const _getimgprops = __webpack_require__(2069);
+      const _imageconfig = __webpack_require__(8526);
+      const _imageconfigcontextsharedruntime = __webpack_require__(2608);
+      const _warnonce = __webpack_require__(8309);
+      const _routercontextsharedruntime = __webpack_require__(4990);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9190)
+        __webpack_require__(7291)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -376,7 +376,7 @@
       /***/
     },
 
-    /***/ 1598: /***/ (
+    /***/ 2069: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -392,9 +392,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(8099);
-      const _imageblursvg = __webpack_require__(6874);
-      const _imageconfig = __webpack_require__(134);
+      const _warnonce = __webpack_require__(8309);
+      const _imageblursvg = __webpack_require__(7976);
+      const _imageconfig = __webpack_require__(8526);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -769,7 +769,7 @@
       /***/
     },
 
-    /***/ 6874: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7976: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 2028: /***/ (
+    /***/ 4186: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -851,10 +851,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1478);
-      const _getimgprops = __webpack_require__(1598);
-      const _imagecomponent = __webpack_require__(3508);
+      const _getimgprops = __webpack_require__(2069);
+      const _imagecomponent = __webpack_require__(6470);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9190)
+        __webpack_require__(7291)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -886,7 +886,7 @@
       /***/
     },
 
-    /***/ 9190: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7291: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -921,7 +921,7 @@
       /***/
     },
 
-    /***/ 7374: /***/ (
+    /***/ 6812: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -938,8 +938,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-beta-4508873393-20240430/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(3456);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/image.js
-      var next_image = __webpack_require__(5008);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/image.js
+      var next_image = __webpack_require__(932);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -969,12 +969,12 @@
       /***/
     },
 
-    /***/ 5008: /***/ (
+    /***/ 932: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(2028);
+      module.exports = __webpack_require__(4186);
 
       /***/
     },
@@ -984,7 +984,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(5497)
+      __webpack_exec__(2307)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: a3e4cbd

eps1lon · 2024-05-13T13:49:37Z

Do you know why people would've opt-out?

huozhi · 2024-05-13T14:33:12Z

Do you know why people would've opt-out?

Mostly because they're missing a Suspsense boundary for certain nextjs hooks usage, and then in the static generation, they'll bail as errors. So opt-out with that flag is a way to get upgraded but you can fix the errors later.

### What Remove `missingSuspenseWithCSRBailout` and always treate the conditions where it was used as `true`. ### Why This was an intended behavior introduced in 14.1, which requires users to always add suspense boundaries if it's using any hook that could bail out to client rendering. `missingSuspenseWithCSRBailout` as `true` was the default behavior and you could disable it with `missingSuspenseWithCSRBailout: false` in next config. Now after the removal you will not be able to opt-out it.

Drop missingSuspenseWithCSRBailout flag

defd79a

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels May 13, 2024

remove legacy test

a9ef45a

ijjk added the tests label May 13, 2024

huozhi marked this pull request as ready for review May 13, 2024 12:23

huozhi requested review from feedthejim, ijjk, shuding, timneutkens, wyattjoh and ztanner as code owners May 13, 2024 12:23

add docs note

a3e4cbd

huozhi requested review from a team as code owners May 13, 2024 12:40

huozhi requested review from ismaelrumzan and jh3y and removed request for a team May 13, 2024 12:40

ijjk added the Documentation Related to Next.js' official documentation. label May 13, 2024

eps1lon approved these changes May 13, 2024

View reviewed changes

ijjk approved these changes May 13, 2024

View reviewed changes

huozhi merged commit 9990641 into canary May 13, 2024

huozhi deleted the huozhi/drop-missingSuspenseWithCSRBailout-flag branch May 13, 2024 21:36

github-actions bot added the locked label May 28, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove missingSuspenseWithCSRBailout config#65688

Remove missingSuspenseWithCSRBailout config#65688
huozhi merged 3 commits intocanaryfrom
huozhi/drop-missingSuspenseWithCSRBailout-flag

huozhi commented May 13, 2024

Uh oh!

ijjk commented May 13, 2024 •

edited

Loading

Uh oh!

ijjk commented May 13, 2024 •

edited

Loading

Uh oh!

eps1lon commented May 13, 2024

Uh oh!

huozhi commented May 13, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

huozhi commented May 13, 2024

What

Why

Uh oh!

ijjk commented May 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests Passed

Uh oh!

ijjk commented May 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

Uh oh!

eps1lon commented May 13, 2024

Uh oh!

huozhi commented May 13, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ijjk commented May 13, 2024 •

edited

Loading

ijjk commented May 13, 2024 •

edited

Loading