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

feat(app-router): introduce experimental.missingSuspenseWithCSRBailout flag #57642

Merged
merged 46 commits into from
Jan 9, 2024

Conversation

feedthejim
Copy link
Contributor

@feedthejim feedthejim commented Oct 27, 2023

What?

This PR adds a new flag called experimental.missingSuspenseWithCSRBailout.

Why?

Via this PR we can break a build when calling useSearchParams without wrapping it in a suspense boundary.

If no suspense boundaries are present, Next.js must avoid doing SSR and defer the entire page's rendering to the client. This is not a great default. Instead, we will now break the build so that you are forced to add a boundary.

How?

Add an experimental flag. If a BailoutToCSRError error is thrown and this flag is enabled, the build should fail and log an error, instead of showing a warning and bail the entire page to client-side rendering.

Closes NEXT-1770

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Oct 27, 2023
@ijjk
Copy link
Member

ijjk commented Oct 27, 2023

Tests Passed

@ijjk
Copy link
Member

ijjk commented Oct 27, 2023

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
buildDuration 12.9s 12.6s N/A
buildDurationCached 7.2s 6.1s N/A
nodeModulesSize 199 MB 199 MB ⚠️ +23.3 kB
nextStartRea..uration (ms) 432ms 437ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
193.HASH.js gzip 181 B 182 B N/A
3f784ff6-HASH.js gzip 53.3 kB 53.3 kB N/A
433-HASH.js gzip 28.6 kB 28.6 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 239 B 242 B N/A
main-HASH.js gzip 31.7 kB 31.8 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB N/A
Overall change 45.2 kB 45.2 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 183 B 181 B N/A
amp-HASH.js gzip 504 B 502 B N/A
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 255 B 253 B N/A
head-HASH.js gzip 350 B 349 B N/A
hooks-HASH.js gzip 369 B 369 B
image-HASH.js gzip 4.28 kB 4.28 kB N/A
index-HASH.js gzip 255 B 256 B N/A
link-HASH.js gzip 2.61 kB 2.61 kB
routerDirect..HASH.js gzip 312 B 311 B N/A
script-HASH.js gzip 385 B 383 B N/A
withRouter-HASH.js gzip 307 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.4 kB 3.4 kB
Client Build Manifests
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
_buildManifest.js gzip 483 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
index.html gzip 527 B 528 B N/A
link.html gzip 541 B 541 B
withRouter.html gzip 523 B 523 B
Overall change 1.06 kB 1.06 kB
Edge SSR bundle Size Overall increase ⚠️
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
edge-ssr.js gzip 93.8 kB 93.8 kB N/A
page.js gzip 148 kB 148 kB ⚠️ +122 B
Overall change 148 kB 148 kB ⚠️ +122 B
Middleware size
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
middleware-b..fest.js gzip 622 B 624 B N/A
middleware-r..fest.js gzip 151 B 151 B
middleware.js gzip 37.4 kB 37.4 kB N/A
edge-runtime..pack.js gzip 1.92 kB 1.92 kB
Overall change 2.07 kB 2.07 kB
Next Runtimes Overall increase ⚠️
vercel/next.js canary vercel/next.js feedthejim/forbid-no-suspense Change
app-page-exp...dev.js gzip 169 kB 169 kB N/A
app-page-exp..prod.js gzip 95.2 kB 95.3 kB ⚠️ +114 B
app-page-tur..prod.js gzip 95.9 kB 96 kB ⚠️ +117 B
app-page-tur..prod.js gzip 90.5 kB 90.6 kB ⚠️ +110 B
app-page.run...dev.js gzip 142 kB 142 kB ⚠️ +105 B
app-page.run..prod.js gzip 89.8 kB 89.9 kB ⚠️ +108 B
app-route-ex...dev.js gzip 24.1 kB 24.1 kB
app-route-ex..prod.js gzip 16.7 kB 16.7 kB
app-route-tu..prod.js gzip 16.7 kB 16.7 kB
app-route-tu..prod.js gzip 16.3 kB 16.3 kB
app-route.ru...dev.js gzip 23.5 kB 23.5 kB
app-route.ru..prod.js gzip 16.3 kB 16.3 kB
pages-api-tu..prod.js gzip 9.38 kB 9.38 kB
pages-api.ru...dev.js gzip 9.65 kB 9.65 kB
pages-api.ru..prod.js gzip 9.37 kB 9.37 kB
pages-turbo...prod.js gzip 21.9 kB 21.9 kB
pages.runtim...dev.js gzip 22.5 kB 22.5 kB
pages.runtim..prod.js gzip 21.9 kB 21.9 kB
server.runti..prod.js gzip 49.5 kB 49.5 kB
Overall change 771 kB 771 kB ⚠️ +554 B
Diff details
Diff for page.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for 433-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

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
failed to diff
Diff for app-page.runtime.prod.js

Diff too large to display

Commit: 2c08aa2

@balazsorban44 balazsorban44 marked this pull request as ready for review January 8, 2024 12:38
@balazsorban44 balazsorban44 requested review from a team as code owners January 8, 2024 12:38
@balazsorban44 balazsorban44 requested review from manovotny and leerob and removed request for a team January 8, 2024 12:38
@balazsorban44 balazsorban44 merged commit c52cb5a into canary Jan 9, 2024
67 checks passed
@balazsorban44 balazsorban44 deleted the feedthejim/forbid-no-suspense branch January 9, 2024 23:26
sokra added a commit that referenced this pull request Jan 11, 2024
sokra added a commit that referenced this pull request Jan 11, 2024
huozhi pushed a commit that referenced this pull request Jan 17, 2024
…hCSRBailout` flag" (#60508) (#60751)

This reapplies the `experimental.missingSuspenseWithCSRBailout` option
to bail out during build if there was a missing suspense boundary when
using something that bails out to client side rendering (like
`useSearchParams()`). See #57642

Closes [NEXT-1770](https://linear.app/vercel/issue/NEXT-1770)
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 24, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants