diff --git a/packages/react-markup/src/ReactMarkupServer.js b/packages/react-markup/src/ReactMarkupServer.js index 5d22f1a4c94fc..95a5ce51c3e16 100644 --- a/packages/react-markup/src/ReactMarkupServer.js +++ b/packages/react-markup/src/ReactMarkupServer.js @@ -184,6 +184,7 @@ export function experimental_renderToHTML( handleFlightError, options ? options.identifierPrefix : undefined, undefined, + undefined, 'Markup', undefined, false, diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js index 469e5465f3083..98406a9ee89bb 100644 --- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js +++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js @@ -70,6 +70,7 @@ type Options = { environmentName?: string | (() => string), filterStackFrame?: (url: string, functionName: string) => boolean, identifierPrefix?: string, + progressiveChunkSize?: number, signal?: AbortSignal, debugChannel?: {onMessage?: (message: string) => void}, onError?: (error: mixed) => void, @@ -84,6 +85,7 @@ function render(model: ReactClientValue, options?: Options): Destination { options ? options.onError : undefined, options ? options.identifierPrefix : undefined, undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, __DEV__ && options && options.debugChannel !== undefined, diff --git a/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js index c45b784d24e06..d5a50c3b5270b 100644 --- a/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js +++ b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js @@ -146,6 +146,7 @@ type Options = { onError?: (error: mixed) => void, identifierPrefix?: string, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, }; type PipeableStream = { @@ -183,6 +184,7 @@ function renderToPipeableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannel !== undefined, @@ -271,6 +273,7 @@ type PrerenderOptions = { onError?: (error: mixed) => void, identifierPrefix?: string, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, signal?: AbortSignal, }; @@ -303,6 +306,7 @@ function prerenderToNodeStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js index 31c3e5cd8b66d..fca64d0c9477b 100644 --- a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js +++ b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js @@ -66,6 +66,7 @@ type Options = { identifierPrefix?: string, signal?: AbortSignal, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, onError?: (error: mixed) => void, }; @@ -128,6 +129,7 @@ export function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -215,6 +217,7 @@ export function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js index 63218160d8daf..3e8f29d0d6e0b 100644 --- a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js +++ b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js @@ -71,6 +71,7 @@ type Options = { identifierPrefix?: string, signal?: AbortSignal, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, onError?: (error: mixed) => void, }; @@ -133,6 +134,7 @@ export function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -220,6 +222,7 @@ export function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js index bd828d317805e..2f886f605c393 100644 --- a/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js +++ b/packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js @@ -159,6 +159,7 @@ type Options = { onError?: (error: mixed) => void, identifierPrefix?: string, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, }; type PipeableStream = { @@ -195,6 +196,7 @@ export function renderToPipeableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannel !== undefined, @@ -352,6 +354,7 @@ export function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -464,6 +467,7 @@ export function prerenderToNodeStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, @@ -526,6 +530,7 @@ export function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js index 7ad138e62f5fa..fd79fb50a3ded 100644 --- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js +++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js @@ -63,6 +63,7 @@ type Options = { identifierPrefix?: string, signal?: AbortSignal, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, onError?: (error: mixed) => void, }; @@ -126,6 +127,7 @@ function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -214,6 +216,7 @@ function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js index 52b4468dcd3dc..cba795035cd06 100644 --- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js +++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js @@ -68,6 +68,7 @@ type Options = { identifierPrefix?: string, signal?: AbortSignal, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, onError?: (error: mixed) => void, }; @@ -131,6 +132,7 @@ function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -219,6 +221,7 @@ function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js index 44bb6209adaf8..38e927aeb0e7f 100644 --- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js +++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js @@ -152,6 +152,7 @@ type Options = { onError?: (error: mixed) => void, identifierPrefix?: string, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, }; type PipeableStream = { @@ -189,6 +190,7 @@ function renderToPipeableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannel !== undefined, @@ -347,6 +349,7 @@ function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -460,6 +463,7 @@ function prerenderToNodeStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, @@ -523,6 +527,7 @@ function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index f5758ec22cfeb..f2143a964f7a1 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -694,7 +694,7 @@ describe('ReactFlightDOMEdge', () => { const [stream2, drip] = dripStream(stream); // Allow some of the content through. - drip(__DEV__ ? 7500 : 5000); + drip(__DEV__ ? 17500 : 15000); const result = await ReactServerDOMClient.createFromReadableStream( stream2, @@ -728,7 +728,7 @@ describe('ReactFlightDOMEdge', () => { }); it('regression: should not leak serialized size', async () => { - const MAX_ROW_SIZE = 3200; + const MAX_ROW_SIZE = 12800; // This test case is a bit convoluted and may no longer trigger the original bug. // Originally, the size of `promisedText` was not cleaned up so the sync portion // ended up being deferred immediately when we called `renderToReadableStream` again diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js index 08192fd1e52d0..ca0078b2d4784 100644 --- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js +++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js @@ -63,6 +63,7 @@ type Options = { identifierPrefix?: string, signal?: AbortSignal, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, onError?: (error: mixed) => void, }; @@ -126,6 +127,7 @@ function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -214,6 +216,7 @@ function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js index 73fc74d4fa4f6..0214d35483507 100644 --- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js +++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js @@ -68,6 +68,7 @@ type Options = { identifierPrefix?: string, signal?: AbortSignal, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, onError?: (error: mixed) => void, }; @@ -131,6 +132,7 @@ function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -219,6 +221,7 @@ function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js index 10162fe33dff7..a4d17abdbcbc4 100644 --- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js +++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js @@ -152,6 +152,7 @@ type Options = { onError?: (error: mixed) => void, identifierPrefix?: string, temporaryReferences?: TemporaryReferenceSet, + progressiveChunkSize?: number, }; type PipeableStream = { @@ -189,6 +190,7 @@ function renderToPipeableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -347,6 +349,7 @@ function renderToReadableStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, debugChannelReadable !== undefined, @@ -460,6 +463,7 @@ function prerenderToNodeStream( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, @@ -523,6 +527,7 @@ function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, false, diff --git a/packages/react-server/README.md b/packages/react-server/README.md index e88807a267f46..76fd1bd28fcfc 100644 --- a/packages/react-server/README.md +++ b/packages/react-server/README.md @@ -44,6 +44,7 @@ function render( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, ); @@ -214,6 +215,7 @@ function prerender( options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.temporaryReferences : undefined, + options ? options.progressiveChunkSize : undefined, __DEV__ && options ? options.environmentName : undefined, __DEV__ && options ? options.filterStackFrame : undefined, ); diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 1f5e24ff5962f..9292aef15ffda 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -617,6 +617,9 @@ const { TaintRegistryPendingRequests, } = ReactSharedInternals; +// Use the same value as ReactFizzServer +const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800; + function throwTaintViolation(message: string) { // eslint-disable-next-line react-internal/prod-error-codes throw new Error(message); @@ -654,6 +657,7 @@ function RequestInstance( onFatalError: (error: mixed) => void, identifierPrefix?: string, temporaryReferences: void | TemporaryReferenceSet, + progressiveChunkSize: void | number, environmentName: void | string | (() => string), // DEV-only filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only keepDebugAlive: boolean, // DEV-only @@ -705,6 +709,10 @@ function RequestInstance( this.temporaryReferences = temporaryReferences; this.identifierPrefix = identifierPrefix || ''; this.identifierCount = 1; + this.progressiveChunkSize = + progressiveChunkSize === undefined + ? DEFAULT_PROGRESSIVE_CHUNK_SIZE + : progressiveChunkSize; this.taintCleanupQueue = cleanupQueue; this.onError = onError === undefined ? defaultErrorHandler : onError; this.onAllReady = onAllReady; @@ -778,6 +786,7 @@ export function createRequest( onError: void | ((error: mixed) => ?string), identifierPrefix: void | string, temporaryReferences: void | TemporaryReferenceSet, + progressiveChunkSize: void | number, environmentName: void | string | (() => string), // DEV-only filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only keepDebugAlive: boolean, // DEV-only @@ -796,6 +805,7 @@ export function createRequest( noop, identifierPrefix, temporaryReferences, + progressiveChunkSize, environmentName, filterStackFrame, keepDebugAlive, @@ -810,6 +820,7 @@ export function createPrerenderRequest( onError: void | ((error: mixed) => ?string), identifierPrefix: void | string, temporaryReferences: void | TemporaryReferenceSet, + progressiveChunkSize: void | number, environmentName: void | string | (() => string), // DEV-only filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only keepDebugAlive: boolean, // DEV-only @@ -828,6 +839,7 @@ export function createPrerenderRequest( onFatalError, identifierPrefix, temporaryReferences, + progressiveChunkSize, environmentName, filterStackFrame, keepDebugAlive, @@ -2076,7 +2088,6 @@ let canEmitDebugInfo: boolean = false; // Approximate string length of the currently serializing row. // Used to power outlining heuristics. let serializedSize = 0; -const MAX_ROW_SIZE = 3200; function deferTask(request: Request, task: Task): ReactJSONValue { // Like outlineTask but instead the item is scheduled to be serialized @@ -3459,7 +3470,7 @@ function renderModelDestructive( const element: ReactElement = (value: any); - if (serializedSize > MAX_ROW_SIZE) { + if (serializedSize > request.progressiveChunkSize) { return deferTask(request, task); } @@ -3542,7 +3553,7 @@ function renderModelDestructive( return newChild; } case REACT_LAZY_TYPE: { - if (serializedSize > MAX_ROW_SIZE) { + if (serializedSize > request.progressiveChunkSize) { return deferTask(request, task); }