From 98773466ce6736a5ffb7e54c1f4b44645ac18a80 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Wed, 30 Jul 2025 18:06:47 -0700 Subject: [PATCH 1/2] [Fizz] Don't outline Boundaries that may contribute to the preamble (#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 --- .../src/__tests__/ReactDOMFizzServer-test.js | 36 +++++++++++++++++++ packages/react-server/src/ReactFizzServer.js | 8 ++++- 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index d6d85b96ce702..565e10c8d0a43 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -10695,4 +10695,40 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual(
Success!
); }); + + 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. + +Unfortunately that previous paragraph wasn't quite long enough so I'll continue with some more prose and maybe throw on some repeated additional strings at the end for good measure. + +` + 'a'.repeat(500); + + const randomTag = Math.random().toString(36).slice(2, 10); + + function App() { + return ( + + + +
{longDescription}
+ + + + ); + } + + let streamedContent = ''; + writable.on('data', chunk => (streamedContent += chunk)); + + await act(() => { + renderToPipeableStream(, {progressiveChunkSize: 100}).pipe( + writable, + ); + }); + + // We don't use the DOM here b/c we execute scripts which hides whether a fallback was shown briefly + // Instead we assert that we never emitted the fallback of the Suspense boundary around the body. + expect(streamedContent).not.toContain(randomTag); + }); }); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index b0df51e0bba64..f532246a4939a 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -460,7 +460,13 @@ function isEligibleForOutlining( // For very small boundaries, don't bother producing a fallback for outlining. // The larger this limit is, the more we can save on preparing fallbacks in case we end up // outlining. - return boundary.byteSize > 500; + return ( + boundary.byteSize > 500 && + // For boundaries that can possibly contribute to the preamble we don't want to outline + // them regardless of their size since the fallbacks should only be emitted if we've + // errored the boundary. + boundary.contentPreamble === null + ); } function defaultErrorHandler(error: mixed) { From 8de7aed8927d87a9e7e838f5d8ae28d5c30805d3 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Wed, 30 Jul 2025 18:18:57 -0700 Subject: [PATCH 2/2] [Fizz] Count Boundary bytes that may contribute to the preamble in the 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 --- .../src/__tests__/ReactDOMFizzServer-test.js | 53 +++++++++++++++++++ packages/react-server/src/ReactFizzServer.js | 8 +++ 2 files changed, 61 insertions(+) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 565e10c8d0a43..22d2279578ff0 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -10731,4 +10731,57 @@ Unfortunately that previous paragraph wasn't quite long enough so I'll continue // Instead we assert that we never emitted the fallback of the Suspense boundary around the body. expect(streamedContent).not.toContain(randomTag); }); + + it('should track byte size of shells that may contribute to the preamble when determining if the blocking render exceeds the max 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. + +Unfortunately that previous paragraph wasn't quite long enough so I'll continue with some more prose and maybe throw on some repeated additional strings at the end for good measure. + +` + 'a'.repeat(500); + + const randomTag = Math.random().toString(36).slice(2, 10); + + function App() { + return ( + <> + + + +
{longDescription}
+ + + +
Outside Preamble
+ + ); + } + + let streamedContent = ''; + writable.on('data', chunk => (streamedContent += chunk)); + + const errors = []; + await act(() => { + renderToPipeableStream(, { + progressiveChunkSize: 5, + onError(e) { + errors.push(e); + }, + }).pipe(writable); + }); + + if (gate(flags => flags.enableFizzBlockingRender)) { + expect(errors.length).toBe(1); + expect(errors[0].message).toContain( + // We set the chunk size low enough that the threshold rounds to zero kB + 'This rendered a large document (>0 kB) without any Suspense boundaries around most of it.', + ); + } else { + expect(errors.length).toBe(0); + } + + // We don't use the DOM here b/c we execute scripts which hides whether a fallback was shown briefly + // Instead we assert that we never emitted the fallback of the Suspense boundary around the body. + expect(streamedContent).not.toContain(randomTag); + }); }); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index f532246a4939a..d619385ec7db3 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -5504,6 +5504,9 @@ function preparePreambleFromSegment( // This boundary is complete. It might have inner boundaries which are pending // and able to provide a preamble so we have to check it's children hoistPreambleState(request.renderState, preamble); + // We track this boundary's byteSize on the request since it will always flush with + // the request since it may contribute to the preamble + request.byteSize += boundary.byteSize; const boundaryRootSegment = boundary.completedSegments[0]; if (!boundaryRootSegment) { // Using the same error from flushSegment to avoid making a new one since conceptually the problem is still the same @@ -5550,6 +5553,7 @@ function preparePreamble(request: Request) { request.completedPreambleSegments === null ) { const collectedPreambleSegments: Array> = []; + const originalRequestByteSize = request.byteSize; const hasPendingPreambles = preparePreambleFromSegment( request, request.completedRootSegment, @@ -5557,6 +5561,10 @@ function preparePreamble(request: Request) { ); if (isPreambleReady(request.renderState, hasPendingPreambles)) { request.completedPreambleSegments = collectedPreambleSegments; + } else { + // We restore the original size since the preamble is not ready + // and we will prepare it again. + request.byteSize = originalRequestByteSize; } } }