[Fizz] Don't outline Boundaries that may contribute to the preamble #34058
+43
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Suspense boundaries that may have contributed to the preamble should not be outlined due to size because these boundaries are only meant to be in fallback state if the boundary actually errors. This change excludes any boundary which has the potential to contribute to the preamble. We could alternatively track which boundaries actually contributed to the preamble but in practice there will be very few and I think this is sufficient. One problem with this approach is it makes Suspense above body opt out of the mode where we omit rel="expect" for large shells. In essence Suspense above body has the semantics of a Shell (it blocks flushing until resolved) but it doesn't get tracked as request bytes and thus we will not opt users into the skipped blocking shell for very large boundaries. This will be fixed in a followup
github-actions
bot
added
the
React Core Team
|
Comparing: 9784cb3...bad8142 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
gnoff
requested review from
sebmarkbage,
Copilot and
eps1lon
and removed request for
Copilot
There was a problem hiding this comment.
Pull Request Overview
This PR modifies the boundary outlining logic in React Server Components to prevent Suspense boundaries that may contribute to the preamble from being outlined based on size. The change ensures that these boundaries are only shown in fallback state when they actually error, rather than being outlined for performance reasons.
- Adds a check to prevent outlining boundaries with
contentPreamble === null - Includes a comprehensive test to verify boundaries contributing to preamble are always flushed regardless of size
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react-server/src/ReactFizzServer.js | Updates isEligibleForOutlining function to exclude boundaries that may contribute to preamble |
| packages/react-dom/src/tests/ReactDOMFizzServer-test.js | Adds test case verifying large boundaries contributing to preamble are not outlined |
|
|
||
| it('should always flush the boundaries contributing the preamble regardless of their size', async () => { | ||
| const longDescription = | ||
| `I need to make this segment somewhat large because it needs to be large enought to be outlined during the initial flush. Setting the progressive chunk size to near zero isn't enough because there is a fixed minimum size that we use to avoid doing the size tracking altogether and this needs to be larger than that at least. |
There was a problem hiding this comment.
There is a typo in the comment: 'enought' should be 'enough'.
Suggested change
| `I need to make this segment somewhat large because it needs to be large enought to be outlined during the initial flush. Setting the progressive chunk size to near zero isn't enough because there is a fixed minimum size that we use to avoid doing the size tracking altogether and this needs to be larger than that at least. | |
| `I need to make this segment somewhat large because it needs to be large enough to be outlined during the initial flush. Setting the progressive chunk size to near zero isn't enough because there is a fixed minimum size that we use to avoid doing the size tracking altogether and this needs to be larger than that at least. |
Copilot uses AI. Check for mistakes.
sebmarkbage
approved these changes
Jul 30, 2025
github-actions bot
pushed a commit
that referenced
this pull request
Jul 31, 2025
…34058) Suspense boundaries that may have contributed to the preamble should not be outlined due to size because these boundaries are only meant to be in fallback state if the boundary actually errors. This change excludes any boundary which has the potential to contribute to the preamble. We could alternatively track which boundaries actually contributed to the preamble but in practice there will be very few and I think this is sufficient. One problem with this approach is it makes Suspense above body opt out of the mode where we omit rel="expect" for large shells. In essence Suspense above body has the semantics of a Shell (it blocks flushing until resolved) but it doesn't get tracked as request bytes and thus we will not opt users into the skipped blocking shell for very large boundaries. This will be fixed in a followup DiffTrain build for [9877346](9877346)
gnoff
added a commit
that referenced
this pull request
Jul 31, 2025
…e request byteSize (#34059) Stacked on #34058 When tracking how large the shell is we currently only track the bytes of everything above Suspense boundaries. However since Boundaries that contribute to the preamble will always be inlined when the shell flushes they should also be considered as part of the request byteSize since they always flush alongside the shell. This change adds this tracking
github-actions bot
pushed a commit
that referenced
this pull request
Jul 31, 2025
…e request byteSize (#34059) Stacked on #34058 When tracking how large the shell is we currently only track the bytes of everything above Suspense boundaries. However since Boundaries that contribute to the preamble will always be inlined when the shell flushes they should also be considered as part of the request byteSize since they always flush alongside the shell. This change adds this tracking DiffTrain build for [8de7aed](8de7aed)
github-actions bot
pushed a commit
to haphanviet/react
that referenced
this pull request
Jul 31, 2025
…e request byteSize (facebook#34059) Stacked on facebook#34058 When tracking how large the shell is we currently only track the bytes of everything above Suspense boundaries. However since Boundaries that contribute to the preamble will always be inlined when the shell flushes they should also be considered as part of the request byteSize since they always flush alongside the shell. This change adds this tracking DiffTrain build for [8de7aed](facebook@8de7aed)
github-actions bot
pushed a commit
to haphanviet/react
that referenced
this pull request
Jul 31, 2025
…e request byteSize (facebook#34059) Stacked on facebook#34058 When tracking how large the shell is we currently only track the bytes of everything above Suspense boundaries. However since Boundaries that contribute to the preamble will always be inlined when the shell flushes they should also be considered as part of the request byteSize since they always flush alongside the shell. This change adds this tracking DiffTrain build for [8de7aed](facebook@8de7aed)
github-actions bot
pushed a commit
to code/lib-react
that referenced
this pull request
Aug 3, 2025
…e request byteSize (facebook#34059) Stacked on facebook#34058 When tracking how large the shell is we currently only track the bytes of everything above Suspense boundaries. However since Boundaries that contribute to the preamble will always be inlined when the shell flushes they should also be considered as part of the request byteSize since they always flush alongside the shell. This change adds this tracking DiffTrain build for [8de7aed](facebook@8de7aed)
github-actions bot
pushed a commit
to code/lib-react
that referenced
this pull request
Aug 3, 2025
…e request byteSize (facebook#34059) Stacked on facebook#34058 When tracking how large the shell is we currently only track the bytes of everything above Suspense boundaries. However since Boundaries that contribute to the preamble will always be inlined when the shell flushes they should also be considered as part of the request byteSize since they always flush alongside the shell. This change adds this tracking DiffTrain build for [8de7aed](facebook@8de7aed)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Suspense boundaries that may have contributed to the preamble should not be outlined due to size because these boundaries are only meant to be in fallback state if the boundary actually errors. This change excludes any boundary which has the potential to contribute to the preamble. We could alternatively track which boundaries actually contributed to the preamble but in practice there will be very few and I think this is sufficient.
One problem with this approach is it makes Suspense above body opt out of the mode where we omit rel="expect" for large shells. In essence Suspense above body has the semantics of a Shell (it blocks flushing until resolved) but it doesn't get tracked as request bytes and thus we will not opt users into the skipped blocking shell for very large boundaries.
This will be fixed in a followup