[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
Josh Story committed
Jul 30, 2025 at 18:18 UTC
8de7aed8927d87a9e7e838f5d8ae28d5c30805d3
2 files changed
+61
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+53
@@ -10731,4 +10731,57 @@ Unfortunately that previous paragraph wasn't quite long enough so I'll continue
10731
// Instead we assert that we never emitted the fallback of the Suspense boundary around the body.
10732
expect(streamedContent).not.toContain(randomTag);
10733
});
10734
+
10735
+ it('should track byte size of shells that may contribute to the preamble when determining if the blocking render exceeds the max size', async () => {
10736
+ const longDescription =
10737
+ `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.
10738
+
10739
+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.
10740
+
10741
+` + 'a'.repeat(500);
10742
+
10743
+ const randomTag = Math.random().toString(36).slice(2, 10);
10744
+
10745
+ function App() {
10746
+ return (
10747
+ <>
10748
+ <Suspense fallback={randomTag}>
10749
+ <html lang="en">
10750
+ <body>
10751
+ <main>{longDescription}</main>
10752
+ </body>
10753
+ </html>
10754
+ </Suspense>
10755
+ <div>Outside Preamble</div>
10756
+ </>
10757
+ );
10758
+ }
10759
+
10760
+ let streamedContent = '';
10761
+ writable.on('data', chunk => (streamedContent += chunk));
10762
+
10763
+ const errors = [];
10764
+ await act(() => {
10765
+ renderToPipeableStream(<App />, {
10766
+ progressiveChunkSize: 5,
10767
+ onError(e) {
10768
+ errors.push(e);
10769
+ },
10770
+ }).pipe(writable);
10771
+ });
10772
+
10773
+ if (gate(flags => flags.enableFizzBlockingRender)) {
10774
+ expect(errors.length).toBe(1);
10775
+ expect(errors[0].message).toContain(
10776
+ // We set the chunk size low enough that the threshold rounds to zero kB
10777
+ 'This rendered a large document (>0 kB) without any Suspense boundaries around most of it.',
10778
+ );
10779
+ } else {
10780
+ expect(errors.length).toBe(0);
10781
+ }
10782
+
10783
+ // We don't use the DOM here b/c we execute scripts which hides whether a fallback was shown briefly
10784
+ // Instead we assert that we never emitted the fallback of the Suspense boundary around the body.
10785
+ expect(streamedContent).not.toContain(randomTag);
10786
+ });
10787
});
packages/react-server/src/ReactFizzServer.js
+8
@@ -5504,6 +5504,9 @@ function preparePreambleFromSegment(
5504
// This boundary is complete. It might have inner boundaries which are pending
5505
// and able to provide a preamble so we have to check it's children
5506
hoistPreambleState(request.renderState, preamble);
5507
+ // We track this boundary's byteSize on the request since it will always flush with
5508
+ // the request since it may contribute to the preamble
5509
+ request.byteSize += boundary.byteSize;
5510
const boundaryRootSegment = boundary.completedSegments[0];
5511
if (!boundaryRootSegment) {
5512
// 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) {
5553
request.completedPreambleSegments === null
5554
) {
5555
const collectedPreambleSegments: Array<Array<Segment>> = [];
5556
+ const originalRequestByteSize = request.byteSize;
5557
const hasPendingPreambles = preparePreambleFromSegment(
5558
request,
5559
request.completedRootSegment,
@@ -5557,6 +5561,10 @@ function preparePreamble(request: Request) {
5561
);
5562
if (isPreambleReady(request.renderState, hasPendingPreambles)) {
5563
request.completedPreambleSegments = collectedPreambleSegments;
5564
+ } else {
5565
+ // We restore the original size since the preamble is not ready
5566
+ // and we will prepare it again.
5567
+ request.byteSize = originalRequestByteSize;
5568
}
5569
}
5570
}