@samitouri / QOS-React-1 / commits / a6e4791b11

[Fizz] Fix root segment IDs (#27371)

Typically we assign IDs lazily when flushing to minimize the ids we have to assign and we try to maximize inlining. When we prerender we could always flush into a buffer before returning but that's not actually what we do right now. We complete rendering before returning but we don't actually run the flush path until someone reads the resulting stream. We assign IDs eagerly when something postpone so that we can refer to those ids in the holes without flushing first. This leads to some interesting conditions that needs to consider this. This PR also deals with rootSegmentId which is the ID of the segment that contains the body of a Suspense boundary. The boundary needs to know this in addition to the Suspense Boundary's ID to know how to inject the root segment into the boundary. Why is the suspense boundary ID and the rootSegmentID just not the same ID? Why don't segments and suspense boundary not share ID namespace? That's a good question and I don't really remember. It might not be a good reason and maybe they should just be the same.

Sebastian Markbåge committed Sep 13, 2023 at 23:18 UTC a6e4791b11816374d015eb4531a82e6cf209c7f2
1 file changed +16 -5
packages/react-server/src/ReactFizzServer.js
+16 -5
@@ -176,6 +176,7 @@ type ReplaySuspenseBoundary = [
176 string | number /* key */,
177 Array<ResumableNode> /* children */,
178 SuspenseBoundaryID /* id */,
179 + number /* rootSegmentID */,
180 ];
181
182 type ReplayNode =
@@ -1957,6 +1958,7 @@ function trackPostpone(
1958 request.renderState,
1959 request.resumableState,
1960 );
1961 + boundary.rootSegmentID = request.nextSegmentId++;
1962
1963 const boundaryKeyPath = boundary.keyPath;
1964 if (boundaryKeyPath === null) {
@@ -1971,6 +1973,7 @@ function trackPostpone(
1973 boundaryKeyPath[2],
1974 children,
1975 boundary.id,
1976 + boundary.rootSegmentID,
1977 ];
1978 trackedPostpones.workingMap.set(boundaryKeyPath, boundaryNode);
1979 addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
@@ -2021,7 +2024,7 @@ function injectPostponedHole(
2024 segment.children.push(newSegment);
2025 // Reset lastPushedText for current Segment since the new Segment "consumed" it
2026 segment.lastPushedText = false;
2024 - return segment;
2027 + return newSegment;
2028 }
2029
2030 function spawnNewSuspendedTask(
@@ -2316,7 +2319,9 @@ function queueCompletedSegment(
2319 if (
2320 segment.chunks.length === 0 &&
2321 segment.children.length === 1 &&
2319 - segment.children[0].boundary === null
2322 + segment.children[0].boundary === null &&
2323 + // Typically the id would not be assigned yet but if it's a postponed segment it might be.
2324 + segment.children[0].id === -1
2325 ) {
2326 // This is an empty segment. There's nothing to write, so we can instead transfer the ID
2327 // to the child. That way any existing references point to the child.
@@ -2668,20 +2673,22 @@ function flushSegment(
2673 );
2674 } else if (boundary.status !== COMPLETED) {
2675 if (boundary.status === PENDING) {
2676 + // For pending boundaries we lazily assign an ID to the boundary
2677 + // and root segment.
2678 boundary.id = assignSuspenseBoundaryID(
2679 request.renderState,
2680 request.resumableState,
2681 );
2682 + boundary.rootSegmentID = request.nextSegmentId++;
2683 }
2676 - // This boundary is still loading. Emit a pending suspense boundary wrapper.
2684
2678 - // Assign an ID to refer to the future content by.
2679 - boundary.rootSegmentID = request.nextSegmentId++;
2685 if (boundary.completedSegments.length > 0) {
2686 // If this is at least partially complete, we can queue it to be partially emitted early.
2687 request.partialBoundaries.push(boundary);
2688 }
2689
2690 + // This boundary is still loading. Emit a pending suspense boundary wrapper.
2691 +
2692 /// This is the first time we should have referenced this ID.
2693 const id = boundary.id;
2694
@@ -2868,6 +2875,10 @@ function flushPartiallyCompletedSegment(
2875 );
2876 }
2877
2878 + return flushSegmentContainer(request, destination, segment);
2879 + } else if (segmentID === boundary.rootSegmentID) {
2880 + // When we emit postponed boundaries, we might have assigned the ID already
2881 + // but it's still the root segment so we can't inject it into the parent yet.
2882 return flushSegmentContainer(request, destination, segment);
2883 } else {
2884 flushSegmentContainer(request, destination, segment);