[Fizz] Finalize postponed nextSegmentId after the prelude flush (#36779)
[Fizz] Finalize postponed nextSegmentId after the prelude flush (#36779) `getPostponedState` snapshots `request.nextSegmentId` at `onAllReady`, before the Fizz stream is flowing. At this point we have visited all Suspense boundaries and know which ones suspended by user code or not. However, only when the stream is flowing are we counting the size of each boundary. When we detect large boundaries, we suspend them i.e. we outline them instead of keeping them inline. This results in more segments being written while the postponed state holds a stale count. We now keep a reference to the returned postponed state and mutate the segment IDs when we outline. That way serializing `postponed` after the `prelude` has flushed writes the latest postponed state. The current API design means that you can potentially serialize stale postponed state. We're considering a redesign to make these issues impossible (e.g. https://github.com/react/react/pull/36815). For now, the postponed state should only be serialized or passed onto a `resume` once the `prelude` has flushed e.g.: ```js const { createWriteStream, writeFileSync } = require('node:fs'); const { createWriteStream } = require('node:stream'); const { prelude, postponed } = prenderToNodeStream(...) // serializing `postponed` now would write a stale state. // serialize prelude const destination = createWriteStream('prelude.html') prelude.pipe(destination) await finished(prelude) // now we can serialize postponed writeFileSync('postponed.json', JSON.stringify(postponed)) ``` --------- Co-authored-by: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Commit b1786c3 [Fizz] Finalize postponed nextSegmentId after the prelude flush (#36779) getPostponedState snapshots request.nextSegmentId at onAllReady, before the Fizz stream is flowing. At this point we have visited all Suspense boundaries and know which ones suspended by user code or not. However, only when the stream is flowing are we counting the size of each boundary. When we detect large boundaries, we suspend them i.e. we outline them instead of keeping them inline. This results in more segments being written while the postponed state holds a stale count. We now keep a reference to the returned postponed state and mutate the segment IDs when we outline. That way serializing postponed after the prelude has flushed writes the latest postponed state. The current API design means that you can potentially serialize stale postponed state. We're considering a redesign to make these issues impossible (e.g. #36815). For now, the postponed state should only be serialized or passed onto a resume once the prelude has flushed e.g.: js const { createWriteStream, writeFileSync } = require('node:fs'); const { createWriteStream } = require('node:stream'); const { prelude, postponed } = prenderToNodeStream(...) // serializing `postponed` now would write a stale state. // serialize prelude const destination = createWriteStream('prelude.html') prelude.pipe(destination) await finished(prelude) // now we can serialize postponed writeFileSync('postponed.json', JSON.stringify(postponed)) --------- Co-authored-by: Sebastian Sebbie Silbermann 1 parent 560db51 commit b1786c3 2 files changed Lines changed: 134 additions & 8 deletions File tree - packages - react-dom/src/tests - react-server/src Lines changed: 89 additions & 0 deletions | Original file line number | Diff line number | Diff line change | | |---|---|---|---| | ||| 1105 | 1105 | | | 1106 | 1106 | | | 1107 | 1107 | | | | 1108 | + | | | 1109 | + | | | 1110 | + | | | 1111 | + | | | 1112 | + | | | 1113 | + | | | 1114 | + | | | 1115 | + | | | 1116 | + | | | 1117 | + | | | 1118 | + | | | 1119 | + | | | 1120 | + | | | 1121 | + | | | 1122 | + | | | 1123 | + | | | 1124 | + | | | 1125 | + | | | 1126 | + | | | 1127 | + | | | 1128 | + | | | 1129 | + | | | 1130 | + | | | 1131 | + | | | 1132 | + | | | 1133 | + | | | 1134 | + | | | 1135 | + | | | 1136 | + | | | 1137 | + | | | 1138 | + | | | 1139 | + | | | 1140 | + | | | 1141 | + | | | 1142 | + | | | 1143 | + | | | 1144 | + | | | 1145 | + | | | 1146 | + | | | 1147 | + | | | 1148 | + | | | 1149 | + | | | 1150 | + | | | 1151 | + | | | 1152 | + | | | 1153 | + | | | 1154 | + | | | 1155 | + | | | 1156 | + | | | 1157 | + | | | 1158 | + | | | 1159 | + | | | 1160 | + | | | 1161 | + | | | 1162 | + | | | 1163 | + | | | 1164 | + | | | 1165 | + | | | 1166 | + | | | 1167 | + | | | 1168 | + | | | 1169 | + | | | 1170 | + | | | 1171 | + | | | 1172 | + | | | 1173 | + | | | 1174 | + | | | 1175 | + | | | 1176 | + | | | 1177 | + | | | 1178 | + | | | 1179 | + | | | 1180 | + | | | 1181 | + | | | 1182 | + | | | 1183 | + | | | 1184 | + | | | 1185 | + | | | 1186 | + | | | 1187 | + | | | 1188 | + | | | 1189 | + | | | 1190 | + | | | 1191 | + | | | 1192 | + | | | 1193 | + | | | 1194 | + | | | 1195 | + | | | 1196 | + | | 1108 | 1197 | | | 1109 | 1198 | | | 1110 | 1199 | | | | | Original file line number | Diff line number | Diff line change | | |---|---|---|---| | ||| 394 | 394 | | | 395 | 395 | | | 396 | 396 | | | | 397 | + | | | 398 | + | | | 399 | + | | | 400 | + | | | 401 | + | | | 402 | + | | | 403 | + | | | 404 | + | | | 405 | + | | 397 | 406 | | | 398 | 407 | | | 399 | 408 | | | | ||| 553 | 562 | | | 554 | 563 | | | 555 | 564 | | | | 565 | + | | 556 | 566 | | | 557 | 567 | | | 558 | 568 | | | | ||| 6146 | 6156 | | | 6147 | 6157 | | | 6148 | 6158 | | | | 6159 | + | | | 6160 | + | | | 6161 | + | | | 6162 | + | | | 6163 | + | | | 6164 | + | | | 6165 | + | | | 6166 | + | | | 6167 | + | | | 6168 | + | | | 6169 | + | | | 6170 | + | | | 6171 | + | | 6149 | 6172 | | | 6150 | 6173 | | | 6151 | 6174 | | | | ||| 6423 | 6446 | | | 6424 | 6447 | | | 6425 | 6448 | | | 6426 | | - | | 6427 | | - | | 6428 | | - | | 6429 | | - | | 6430 | | - | | 6431 | | - | | 6432 | | - | | | 6449 | + | | | 6450 | + | | | 6451 | + | | | 6452 | + | | | 6453 | + | | | 6454 | + | | | 6455 | + | | | 6456 | + | | | 6457 | + | | | 6458 | + | | 6433 | 6459 | | | 6434 | 6460 | | | 6435 | 6461 | | | | ||| 6443 | 6469 | | | 6444 | 6470 | | | 6445 | 6471 | | | 6446 | | - | | | 6472 | + | | 6447 | 6473 | | | 6448 | 6474 | | | 6449 | 6475 | | | 6450 | 6476 | | | 6451 | 6477 | | | 6452 | 6478 | | | 6453 | 6479 | | | | 6480 | + | | | 6481 | + | | | 6482 | + | | | 6483 | + | | | 6484 | + | | | 6485 | + | | | 6486 | + | | | 6487 | + | | | 6488 | + | | | 6489 | + | | | 6490 | + | | 6454 | 6491 | | 0 commit comments
Comments
No comments yet. Start the discussion.