[Fizz] Outline if a boundary would add too many bytes to the next completion (#33029)
Follow up to #33027. This enhances the heuristic so that we accumulate the size of the currently written boundaries. Starting from the size of the root (minus preamble) for the shell. This ensures that if you have many small boundaries they don't all continue to get inlined. For example, you can wrap each paragraph in a document in a Suspense boundary to regain document streaming capabilities if that's what you want. However, one consideration is if it's worth producing a fallback at all. Maybe if it's like `null` it's free but if it's like a whole alternative page, then it's not. It's possible to have completely useless Suspense boundaries such as when you nest several directly inside each other. So this uses a limit of at least 500 bytes of the content itself for it to be worth outlining at all. It also can't be too small because then for example a long list of paragraphs can never be outlined. In the fixture I straddle this limit so some paragraphs are too small to be considered. An unfortunate effect of that is that you can end up with some of them not being outlined which means that they appear out of order. SuspenseList is supposed to address that but it's unfortunate. The limit is still fairly high though so it's unlikely that by default you'd start outlining anything within the viewport at all. I had to reduce the `progressiveChunkSize` by an order of magnitude in my fixture to try it out properly.
Sebastian Markbåge committed
Apr 29, 2025 at 19:13 UTC
18212ca960ee2f0acf538c2198f7ba36c3042ecd
4 files changed
+309
-247
fixtures/ssr/server/render.js
+2
-2
@@ -19,7 +19,7 @@ class ThrottledWritable extends Writable {
19
constructor(destination) {
20
super();
21
this.destination = destination;
22
- this.delay = 150;
22
+ this.delay = 10;
23
}
24
25
_write(chunk, encoding, callback) {
@@ -49,10 +49,10 @@ export default function render(url, res) {
49
// Log fatal errors
50
console.error('Fatal', error);
51
});
52
- console.log('hello');
52
let didError = false;
53
const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
54
bootstrapScripts: [assets['main.js']],
55
+ progressiveChunkSize: 1024,
56
onShellReady() {
57
// If something errored before we started streaming, we set the error code appropriately.
58
res.statusCode = didError ? 500 : 200;
fixtures/ssr/src/components/Chrome.js
+1
-5
@@ -39,11 +39,7 @@ export default class Chrome extends Component {
39
{this.props.children}
40
</Theme.Provider>
41
</Suspense>
42
- <p>This should appear in the first paint.</p>
43
- <Suspense fallback="Loading...">
44
- <p>This content should not block paint.</p>
45
- <LargeContent />
46
- </Suspense>
42
+ <LargeContent />
43
<script
44
dangerouslySetInnerHTML={{
45
__html: `assetManifest = ${JSON.stringify(assets)};`,
fixtures/ssr/src/components/LargeContent.js
+284
-236
@@ -1,243 +1,291 @@
1
-import React, {Fragment} from 'react';
1
+import React, {Fragment, Suspense} from 'react';
2
3
export default function LargeContent() {
4
return (
5
<Fragment>
6
- <p>
7
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
8
- porttitor tortor ac lectus faucibus, eget eleifend elit hendrerit.
9
- Integer porttitor nisi in leo congue rutrum. Morbi sed ante posuere,
10
- aliquam lorem ac, imperdiet orci. Duis malesuada gravida pharetra. Cras
11
- facilisis arcu diam, id dictum lorem imperdiet a. Suspendisse aliquet
12
- tempus tortor et ultricies. Aliquam libero velit, posuere tempus ante
13
- sed, pellentesque tincidunt lorem. Nullam iaculis, eros a varius
14
- aliquet, tortor felis tempor metus, nec cursus felis eros aliquam nulla.
15
- Vivamus ut orci sed mauris congue lacinia. Cras eget blandit neque.
16
- Pellentesque a massa in turpis ullamcorper volutpat vel at massa. Sed
17
- ante est, auctor non diam non, vulputate ultrices metus. Maecenas dictum
18
- fermentum quam id aliquam. Donec porta risus vitae pretium posuere.
19
- Fusce facilisis eros in lacus tincidunt congue.
20
- </p>
21
- <p>
22
- Pellentesque habitant morbi tristique senectus et netus et malesuada
23
- fames ac turpis egestas. Phasellus dolor ante, iaculis vel nisl vitae,
24
- ornare ornare orci. Praesent sit amet lobortis sapien. Suspendisse
25
- pharetra posuere libero ut dapibus. Donec condimentum ante urna. Aliquam
26
- laoreet tincidunt lacus, sed interdum tortor dapibus elementum. Nam sed
27
- faucibus lorem. Suspendisse finibus, velit sed molestie finibus, risus
28
- purus mollis ante, sit amet aliquet sapien nulla ut nibh. In eget ligula
29
- metus. Duis in purus mattis, blandit magna nec, dictum nunc.
30
- </p>
31
- <p>
32
- Sed convallis magna id tortor blandit dictum. Suspendisse in porttitor
33
- neque. Integer quis metus consequat, rutrum est sit amet, finibus justo.
34
- In hac habitasse platea dictumst. Nullam sagittis, risus sed vehicula
35
- porta, sapien elit ultrices nibh, vel luctus odio tortor et ante. Sed
36
- porta enim in hendrerit tristique. Pellentesque id feugiat libero, sit
37
- amet tempor enim. Proin gravida nisl justo, vel ornare dolor bibendum
38
- ac. Mauris scelerisque mattis facilisis. Praesent sodales augue mollis
39
- orci vulputate aliquet. Mauris molestie luctus neque, sed congue elit
40
- congue ut. Cras quis tortor augue. In auctor nulla vel turpis dapibus
41
- egestas. Phasellus consequat rhoncus nisi sed dignissim. Quisque varius
42
- justo non ex lobortis finibus cursus nec justo. Nulla erat neque,
43
- commodo et sem convallis, tristique faucibus odio.
44
- </p>
45
- <p>
46
- Ut condimentum volutpat sem, id accumsan augue placerat vel. Donec ac
47
- efficitur turpis. Suspendisse pretium odio euismod sapien bibendum, sed
48
- tempus est condimentum. Etiam nisl magna, consequat at ullamcorper at,
49
- sollicitudin eu eros. In mattis ligula arcu. Sed eu consectetur turpis,
50
- id molestie ligula. Vestibulum et venenatis enim. Donec condimentum
51
- vitae nisi et placerat. Sed fringilla vehicula egestas. Proin
52
- consectetur, nibh non ornare scelerisque, diam lorem cursus lectus, ut
53
- mattis mauris purus id mi. Curabitur non ligula sit amet augue molestie
54
- vulputate. Donec maximus magna at volutpat aliquet. Pellentesque
55
- dignissim nulla eget odio eleifend tincidunt. Etiam diam lorem, ornare
56
- vel scelerisque vel, iaculis id risus. Donec aliquet aliquam felis, ac
57
- vehicula lacus suscipit vitae. Morbi eu ligula elit.
58
- </p>
59
- <p>
60
- Praesent pellentesque, libero ut faucibus tempor, purus elit consequat
61
- metus, in ornare nulla lectus at erat. Duis quis blandit turpis. Fusce
62
- at ligula rutrum metus molestie tempor sit amet eu justo. Maecenas
63
- tincidunt nisl nunc. Morbi ac metus tempor, pretium arcu vel, dapibus
64
- velit. Nulla convallis ligula at porta mollis. Duis magna ante, mollis
65
- eget nibh in, congue tempor dolor. Sed tincidunt sagittis arcu, in
66
- ultricies neque tempor non. Suspendisse eget nunc neque. Nulla sit amet
67
- odio volutpat, maximus purus id, dictum metus. Integer consequat, orci
68
- nec ullamcorper porta, mauris libero vestibulum ipsum, nec tempor tellus
69
- enim non nunc. Quisque nisl risus, dapibus sit amet purus nec, aliquam
70
- finibus metus. Nullam condimentum urna viverra finibus cursus. Proin et
71
- sollicitudin tellus, porta fermentum felis. Maecenas ac turpis sed dui
72
- condimentum interdum sed sed erat. Mauris ut dignissim erat.
73
- </p>
74
- <p>
75
- Proin varius porta dui, id fringilla elit lobortis eget. Integer at
76
- metus elementum, efficitur eros id, euismod est. Morbi vestibulum nibh
77
- ac leo luctus sagittis. Praesent rhoncus, risus sit amet mattis dictum,
78
- diam sapien tempor neque, vel dignissim nulla neque eget ex. Nam
79
- sollicitudin metus quis ullamcorper dapibus. Nam tristique euismod
80
- efficitur. Pellentesque rhoncus vel sem eget lacinia. Pellentesque
81
- volutpat velit ac dignissim luctus. Vivamus euismod tortor at ligula
82
- mattis porta. Vestibulum ante ipsum primis in faucibus orci luctus et
83
- ultrices posuere cubilia curae;
84
- </p>
85
- <p>
86
- Proin blandit vulputate efficitur. Pellentesque sit amet porta odio.
87
- Nunc pulvinar varius rhoncus. Mauris fermentum leo a imperdiet pretium.
88
- Mauris scelerisque justo vel ante egestas, eget tempus neque malesuada.
89
- Sed dictum ex vel justo dignissim, aliquam commodo diam rutrum. Integer
90
- dignissim est ullamcorper augue laoreet consectetur id at diam. Vivamus
91
- molestie blandit urna, eget pulvinar augue dictum vestibulum. Duis
92
- maximus bibendum mauris, ut ultricies elit rhoncus eu. Praesent gravida
93
- placerat mauris. Praesent tempor ipsum at nibh rhoncus sagittis. Duis
94
- non sem turpis. Quisque et metus leo. Sed eu purus lorem. Pellentesque
95
- dictum metus sed leo viverra interdum. Maecenas vel tincidunt mi.
96
- </p>
97
- <p>
98
- Praesent consequat dapibus pellentesque. Fusce at enim id mauris laoreet
99
- commodo. Nullam ut mauris euismod, rhoncus tellus vel, facilisis diam.
100
- Aenean porta faucibus augue, a iaculis massa iaculis in. Praesent vel
101
- metus purus. Etiam quis augue eget orci lobortis eleifend ac ut lorem.
102
- Aenean non orci quis nisi molestie maximus. Mauris interdum, eros et
103
- aliquam aliquam, lectus diam pharetra velit, in condimentum odio eros
104
- non quam. Praesent bibendum pretium turpis vitae tristique. Mauris
105
- convallis, massa ut fermentum fermentum, libero orci tempus ipsum,
106
- malesuada ultrices metus sapien placerat lectus. Ut fringilla arcu nec
107
- lorem ultrices mattis. Etiam id tortor feugiat magna gravida gravida.
108
- Morbi aliquam, mi ac pellentesque mattis, erat ex venenatis erat, a
109
- vestibulum eros turpis quis metus. Pellentesque tempus justo in ligula
110
- ultricies porta. Phasellus congue felis sit amet dolor tristique
111
- finibus. Nunc eget eros non est ultricies vestibulum.
112
- </p>
113
- <p>
114
- Donec efficitur ligula quis odio tincidunt tristique. Duis urna dolor,
115
- hendrerit quis enim at, accumsan auctor turpis. Vivamus ante lorem,
116
- maximus vitae suscipit ut, congue eget velit. Maecenas sed ligula erat.
117
- Aliquam mollis purus at nisi porta suscipit in ut magna. Vivamus a
118
- turpis nec tellus egestas suscipit nec ornare nisi. Donec vestibulum
119
- libero quis ex suscipit, sit amet luctus leo gravida.
120
- </p>
121
- <p>
122
- Praesent pharetra dolor elit, sed volutpat lorem rhoncus non. Etiam a
123
- neque ut velit dignissim sodales. Vestibulum neque risus, condimentum
124
- nec consectetur vitae, ultricies ut sapien. Integer iaculis at urna sit
125
- amet malesuada. Integer tincidunt, felis ac vulputate semper, velit leo
126
- facilisis lorem, quis aliquet leo dui id lorem. Morbi non quam quis nisl
127
- sagittis consequat nec vitae libero. Nunc molestie pretium libero, eu
128
- eleifend nibh feugiat sed. Ut in bibendum diam, sit amet vehicula risus.
129
- Nam ornare ac nisi ac euismod. Nullam id egestas nulla. Etiam porta
130
- commodo ante sit amet pellentesque. Suspendisse eleifend purus in urna
131
- euismod auctor non vel nisi. Suspendisse rutrum est nunc, sit amet
132
- lacinia lacus dictum eget. Pellentesque habitant morbi tristique
133
- senectus et netus et malesuada fames ac turpis egestas. Morbi a blandit
134
- diam.
135
- </p>
136
- <p>
137
- Donec eget efficitur sapien. Suspendisse diam lacus, varius eu interdum
138
- et, congue ac justo. Proin ipsum odio, suscipit elementum mauris sed,
139
- porttitor congue est. Cras dapibus dictum ante, vitae gravida elit
140
- venenatis sed. Sed massa sem, posuere ut enim sit amet, vestibulum
141
- condimentum nibh. Pellentesque pulvinar sodales lacinia. Proin id
142
- pretium sapien, non convallis nulla. In mollis tincidunt sem et
143
- porttitor.
144
- </p>
145
- <p>
146
- Integer at sollicitudin sem. Suspendisse sed semper orci. Nulla at nibh
147
- nec risus suscipit posuere egestas vitae enim. Nullam mauris justo,
148
- mattis vel laoreet non, finibus nec nisl. Cras iaculis ultrices nibh,
149
- non commodo eros aliquam non. Sed vitae mollis dui, at maximus metus. Ut
150
- vestibulum, enim ut lobortis vulputate, lorem urna congue elit, non
151
- dictum odio lorem eget velit. Morbi eleifend id ligula vitae vulputate.
152
- Suspendisse ac laoreet justo. Proin eu mattis diam.
153
- </p>
154
- <p>
155
- Nunc in ex quis enim ullamcorper scelerisque eget ac eros. Class aptent
156
- taciti sociosqu ad litora torquent per conubia nostra, per inceptos
157
- himenaeos. Aliquam turpis dui, egestas a rhoncus non, fermentum in
158
- tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
159
- posuere cubilia curae; Aenean non risus arcu. Nam ultricies lacinia
160
- volutpat. Class aptent taciti sociosqu ad litora torquent per conubia
161
- nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur
162
- adipiscing elit.
163
- </p>
164
- <p>
165
- Aliquam a felis leo. Proin lorem ipsum, congue eu cursus in, rhoncus ut
166
- libero. Vestibulum sit amet consequat nunc. Ut eleifend lobortis lacus,
167
- vel molestie metus viverra eget. Nullam suscipit eu magna scelerisque
168
- suscipit. Donec dictum in diam nec lacinia. Mauris pellentesque ex ut
169
- purus facilisis, eget placerat turpis semper. Sed dapibus lorem ante, et
170
- malesuada dui eleifend ac. Sed diam felis, semper ac nulla vel, posuere
171
- ultricies ante.
172
- </p>
173
- <p>
174
- Nunc elementum odio sapien, sit amet vulputate lorem varius at. Fusce
175
- non sapien vitae lorem aliquam pretium sit amet congue dolor. Nunc quis
176
- tortor luctus, pretium ex a, tincidunt urna. Aliquam fermentum massa a
177
- erat pharetra varius. Curabitur at auctor dui. Sed posuere pellentesque
178
- massa, vel bibendum urna dictum non. Fusce eget rhoncus urna. Maecenas
179
- sed lectus tellus. Pellentesque convallis dapibus nisl vitae venenatis.
180
- Quisque ornare a dolor ac pharetra. Nam cursus, mi a lacinia accumsan,
181
- felis erat fringilla magna, ac mattis nunc ante a orci.
182
- </p>
183
- <p>
184
- Nunc vel tortor euismod, commodo tortor non, aliquam nisi. Maecenas
185
- tempus mollis velit non suscipit. Mauris sit amet dolor sed ex fringilla
186
- varius. Suspendisse vel cursus risus. Vivamus pharetra massa nec dolor
187
- aliquam feugiat. Fusce finibus enim commodo, scelerisque ante eu,
188
- laoreet ex. Curabitur placerat magna quis imperdiet lacinia. Etiam
189
- lectus mauris, porttitor ac lacinia sed, posuere eget lacus. Mauris
190
- vulputate mattis imperdiet. Nunc id aliquet libero, vitae hendrerit
191
- purus. Praesent vestibulum urna ac egestas tempor. In molestie, nunc sit
192
- amet sagittis dapibus, ligula enim fermentum mi, lacinia molestie eros
193
- dui in tortor. Mauris fermentum pulvinar faucibus. Curabitur laoreet
194
- eleifend purus, non tincidunt tortor gravida nec. Nam eu lectus congue,
195
- commodo libero et, porttitor est. Nullam tincidunt, nisi eu congue
196
- congue, magna justo commodo massa, nec efficitur dui lectus non sem.
197
- </p>
198
- <p>
199
- Nullam vehicula, ipsum quis lacinia tristique, elit nulla dignissim
200
- augue, at pulvinar metus justo ac magna. Nullam nec nunc ac sapien
201
- mollis cursus eu ac enim. Pellentesque a pharetra erat. Ut tempor magna
202
- nisi, accumsan blandit lectus volutpat nec. Vivamus vel lorem nec eros
203
- blandit dictum eget ac diam. Nulla nec turpis dolor. Morbi eu euismod
204
- libero. Nam ut tortor at arcu porta tincidunt. In gravida ligula
205
- fringilla ornare imperdiet. Nulla scelerisque ante erat, efficitur
206
- dictum metus ullamcorper vel. Nam ac purus metus. Maecenas eget tempus
207
- nulla. Ut magna lorem, efficitur ut ex a, semper aliquam magna. Praesent
208
- lobortis, velit ac posuere mattis, justo est accumsan turpis, id
209
- sagittis felis mi in lacus.
210
- </p>
211
- <p>
212
- Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
213
- consequat sem quis sem consequat, non aliquam est placerat. Cras
214
- malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
215
- velit et ex interdum, vel lobortis ante vestibulum. Nam placerat lectus
216
- eu commodo efficitur. Pellentesque in nunc ac massa porttitor eleifend
217
- ut efficitur sem. Aenean at magna auctor, posuere augue in, ultrices
218
- arcu. Praesent dignissim augue ex, malesuada maximus metus interdum a.
219
- Proin nec odio in nulla vestibulum.
220
- </p>
221
- <p>
222
- Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
223
- consequat sem quis sem consequat, non aliquam est placerat. Cras
224
- malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
225
- velit et ex interdum, vel lobortis ante vestibulum. Nam placerat lectus
226
- eu commodo efficitur. Pellentesque in nunc ac massa porttitor eleifend
227
- ut efficitur sem. Aenean at magna auctor, posuere augue in, ultrices
228
- arcu. Praesent dignissim augue ex, malesuada maximus metus interdum a.
229
- Proin nec odio in nulla vestibulum.
230
- </p>
231
- <p>
232
- Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
233
- consequat sem quis sem consequat, non aliquam est placerat. Cras
234
- malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
235
- velit et ex interdum, vel lobortis ante vestibulum. Nam placerat lectus
236
- eu commodo efficitur. Pellentesque in nunc ac massa porttitor eleifend
237
- ut efficitur sem. Aenean at magna auctor, posuere augue in, ultrices
238
- arcu. Praesent dignissim augue ex, malesuada maximus metus interdum a.
239
- Proin nec odio in nulla vestibulum.
240
- </p>
6
+ <Suspense fallback={null}>
7
+ <p>
8
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
9
+ porttitor tortor ac lectus faucibus, eget eleifend elit hendrerit.
10
+ Integer porttitor nisi in leo congue rutrum. Morbi sed ante posuere,
11
+ aliquam lorem ac, imperdiet orci. Duis malesuada gravida pharetra.
12
+ Cras facilisis arcu diam, id dictum lorem imperdiet a. Suspendisse
13
+ aliquet tempus tortor et ultricies. Aliquam libero velit, posuere
14
+ tempus ante sed, pellentesque tincidunt lorem. Nullam iaculis, eros a
15
+ varius aliquet, tortor felis tempor metus, nec cursus felis eros
16
+ aliquam nulla. Vivamus ut orci sed mauris congue lacinia. Cras eget
17
+ blandit neque. Pellentesque a massa in turpis ullamcorper volutpat vel
18
+ at massa. Sed ante est, auctor non diam non, vulputate ultrices metus.
19
+ Maecenas dictum fermentum quam id aliquam. Donec porta risus vitae
20
+ pretium posuere. Fusce facilisis eros in lacus tincidunt congue.
21
+ </p>
22
+ </Suspense>
23
+ <Suspense fallback={null}>
24
+ <p>
25
+ Pellentesque habitant morbi tristique senectus et netus et malesuada
26
+ fames ac turpis egestas. Phasellus dolor ante, iaculis vel nisl vitae,
27
+ ornare ornare orci. Praesent sit amet lobortis sapien. Suspendisse
28
+ pharetra posuere libero ut dapibus. Donec condimentum ante urna.
29
+ Aliquam laoreet tincidunt lacus, sed interdum tortor dapibus
30
+ elementum. Nam sed faucibus lorem. Suspendisse finibus, velit sed
31
+ molestie finibus, risus purus mollis ante, sit amet aliquet sapien
32
+ nulla ut nibh. In eget ligula metus. Duis in purus mattis, blandit
33
+ magna nec, dictum nunc.
34
+ </p>
35
+ </Suspense>
36
+ <Suspense fallback={null}>
37
+ <p>
38
+ Sed convallis magna id tortor blandit dictum. Suspendisse in porttitor
39
+ neque. Integer quis metus consequat, rutrum est sit amet, finibus
40
+ justo. In hac habitasse platea dictumst. Nullam sagittis, risus sed
41
+ vehicula porta, sapien elit ultrices nibh, vel luctus odio tortor et
42
+ ante. Sed porta enim in hendrerit tristique. Pellentesque id feugiat
43
+ libero, sit amet tempor enim. Proin gravida nisl justo, vel ornare
44
+ dolor bibendum ac. Mauris scelerisque mattis facilisis. Praesent
45
+ sodales augue mollis orci vulputate aliquet. Mauris molestie luctus
46
+ neque, sed congue elit congue ut. Cras quis tortor augue. In auctor
47
+ nulla vel turpis dapibus egestas. Phasellus consequat rhoncus nisi sed
48
+ dignissim. Quisque varius justo non ex lobortis finibus cursus nec
49
+ justo. Nulla erat neque, commodo et sem convallis, tristique faucibus
50
+ odio.
51
+ </p>
52
+ </Suspense>
53
+ <Suspense fallback={null}>
54
+ <p>
55
+ Ut condimentum volutpat sem, id accumsan augue placerat vel. Donec ac
56
+ efficitur turpis. Suspendisse pretium odio euismod sapien bibendum,
57
+ sed tempus est condimentum. Etiam nisl magna, consequat at ullamcorper
58
+ at, sollicitudin eu eros. In mattis ligula arcu. Sed eu consectetur
59
+ turpis, id molestie ligula. Vestibulum et venenatis enim. Donec
60
+ condimentum vitae nisi et placerat. Sed fringilla vehicula egestas.
61
+ Proin consectetur, nibh non ornare scelerisque, diam lorem cursus
62
+ lectus, ut mattis mauris purus id mi. Curabitur non ligula sit amet
63
+ augue molestie vulputate. Donec maximus magna at volutpat aliquet.
64
+ Pellentesque dignissim nulla eget odio eleifend tincidunt. Etiam diam
65
+ lorem, ornare vel scelerisque vel, iaculis id risus. Donec aliquet
66
+ aliquam felis, ac vehicula lacus suscipit vitae. Morbi eu ligula elit.
67
+ </p>
68
+ </Suspense>
69
+ <p>This should appear in the first paint.</p>
70
+ <Suspense fallback={null}>
71
+ <p>
72
+ Praesent pellentesque, libero ut faucibus tempor, purus elit consequat
73
+ metus, in ornare nulla lectus at erat. Duis quis blandit turpis. Fusce
74
+ at ligula rutrum metus molestie tempor sit amet eu justo. Maecenas
75
+ tincidunt nisl nunc. Morbi ac metus tempor, pretium arcu vel, dapibus
76
+ velit. Nulla convallis ligula at porta mollis. Duis magna ante, mollis
77
+ eget nibh in, congue tempor dolor. Sed tincidunt sagittis arcu, in
78
+ ultricies neque tempor non. Suspendisse eget nunc neque. Nulla sit
79
+ amet odio volutpat, maximus purus id, dictum metus. Integer consequat,
80
+ orci nec ullamcorper porta, mauris libero vestibulum ipsum, nec tempor
81
+ tellus enim non nunc. Quisque nisl risus, dapibus sit amet purus nec,
82
+ aliquam finibus metus. Nullam condimentum urna viverra finibus cursus.
83
+ Proin et sollicitudin tellus, porta fermentum felis. Maecenas ac
84
+ turpis sed dui condimentum interdum sed sed erat. Mauris ut dignissim
85
+ erat.
86
+ </p>
87
+ </Suspense>
88
+ <Suspense fallback={null}>
89
+ <p>
90
+ Proin varius porta dui, id fringilla elit lobortis eget. Integer at
91
+ metus elementum, efficitur eros id, euismod est. Morbi vestibulum nibh
92
+ ac leo luctus sagittis. Praesent rhoncus, risus sit amet mattis
93
+ dictum, diam sapien tempor neque, vel dignissim nulla neque eget ex.
94
+ Nam sollicitudin metus quis ullamcorper dapibus. Nam tristique euismod
95
+ efficitur. Pellentesque rhoncus vel sem eget lacinia. Pellentesque
96
+ volutpat velit ac dignissim luctus. Vivamus euismod tortor at ligula
97
+ mattis porta. Vestibulum ante ipsum primis in faucibus orci luctus et
98
+ ultrices posuere cubilia curae;
99
+ </p>
100
+ </Suspense>
101
+ <Suspense fallback={null}>
102
+ <p>
103
+ Proin blandit vulputate efficitur. Pellentesque sit amet porta odio.
104
+ Nunc pulvinar varius rhoncus. Mauris fermentum leo a imperdiet
105
+ pretium. Mauris scelerisque justo vel ante egestas, eget tempus neque
106
+ malesuada. Sed dictum ex vel justo dignissim, aliquam commodo diam
107
+ rutrum. Integer dignissim est ullamcorper augue laoreet consectetur id
108
+ at diam. Vivamus molestie blandit urna, eget pulvinar augue dictum
109
+ vestibulum. Duis maximus bibendum mauris, ut ultricies elit rhoncus
110
+ eu. Praesent gravida placerat mauris. Praesent tempor ipsum at nibh
111
+ rhoncus sagittis. Duis non sem turpis. Quisque et metus leo. Sed eu
112
+ purus lorem. Pellentesque dictum metus sed leo viverra interdum.
113
+ Maecenas vel tincidunt mi.
114
+ </p>
115
+ </Suspense>
116
+ <Suspense fallback={null}>
117
+ <p>
118
+ Praesent consequat dapibus pellentesque. Fusce at enim id mauris
119
+ laoreet commodo. Nullam ut mauris euismod, rhoncus tellus vel,
120
+ facilisis diam. Aenean porta faucibus augue, a iaculis massa iaculis
121
+ in. Praesent vel metus purus. Etiam quis augue eget orci lobortis
122
+ eleifend ac ut lorem. Aenean non orci quis nisi molestie maximus.
123
+ Mauris interdum, eros et aliquam aliquam, lectus diam pharetra velit,
124
+ in condimentum odio eros non quam. Praesent bibendum pretium turpis
125
+ vitae tristique. Mauris convallis, massa ut fermentum fermentum,
126
+ libero orci tempus ipsum, malesuada ultrices metus sapien placerat
127
+ lectus. Ut fringilla arcu nec lorem ultrices mattis. Etiam id tortor
128
+ feugiat magna gravida gravida. Morbi aliquam, mi ac pellentesque
129
+ mattis, erat ex venenatis erat, a vestibulum eros turpis quis metus.
130
+ Pellentesque tempus justo in ligula ultricies porta. Phasellus congue
131
+ felis sit amet dolor tristique finibus. Nunc eget eros non est
132
+ ultricies vestibulum.
133
+ </p>
134
+ </Suspense>
135
+ <Suspense fallback={null}>
136
+ <p>
137
+ Donec efficitur ligula quis odio tincidunt tristique. Duis urna dolor,
138
+ hendrerit quis enim at, accumsan auctor turpis. Vivamus ante lorem,
139
+ maximus vitae suscipit ut, congue eget velit. Maecenas sed ligula
140
+ erat. Aliquam mollis purus at nisi porta suscipit in ut magna. Vivamus
141
+ a turpis nec tellus egestas suscipit nec ornare nisi. Donec vestibulum
142
+ libero quis ex suscipit, sit amet luctus leo gravida.
143
+ </p>
144
+ </Suspense>
145
+ <Suspense fallback={null}>
146
+ <p>
147
+ Praesent pharetra dolor elit, sed volutpat lorem rhoncus non. Etiam a
148
+ neque ut velit dignissim sodales. Vestibulum neque risus, condimentum
149
+ nec consectetur vitae, ultricies ut sapien. Integer iaculis at urna
150
+ sit amet malesuada. Integer tincidunt, felis ac vulputate semper,
151
+ velit leo facilisis lorem, quis aliquet leo dui id lorem. Morbi non
152
+ quam quis nisl sagittis consequat nec vitae libero. Nunc molestie
153
+ pretium libero, eu eleifend nibh feugiat sed. Ut in bibendum diam, sit
154
+ amet vehicula risus. Nam ornare ac nisi ac euismod. Nullam id egestas
155
+ nulla. Etiam porta commodo ante sit amet pellentesque. Suspendisse
156
+ eleifend purus in urna euismod auctor non vel nisi. Suspendisse rutrum
157
+ est nunc, sit amet lacinia lacus dictum eget. Pellentesque habitant
158
+ morbi tristique senectus et netus et malesuada fames ac turpis
159
+ egestas. Morbi a blandit diam.
160
+ </p>
161
+ </Suspense>
162
+ <Suspense fallback={null}>
163
+ <p>
164
+ Donec eget efficitur sapien. Suspendisse diam lacus, varius eu
165
+ interdum et, congue ac justo. Proin ipsum odio, suscipit elementum
166
+ mauris sed, porttitor congue est. Cras dapibus dictum ante, vitae
167
+ gravida elit venenatis sed. Sed massa sem, posuere ut enim sit amet,
168
+ vestibulum condimentum nibh. Pellentesque pulvinar sodales lacinia.
169
+ Proin id pretium sapien, non convallis nulla. In mollis tincidunt sem
170
+ et porttitor.
171
+ </p>
172
+ </Suspense>
173
+ <Suspense fallback={null}>
174
+ <p>
175
+ Integer at sollicitudin sem. Suspendisse sed semper orci. Nulla at
176
+ nibh nec risus suscipit posuere egestas vitae enim. Nullam mauris
177
+ justo, mattis vel laoreet non, finibus nec nisl. Cras iaculis ultrices
178
+ nibh, non commodo eros aliquam non. Sed vitae mollis dui, at maximus
179
+ metus. Ut vestibulum, enim ut lobortis vulputate, lorem urna congue
180
+ elit, non dictum odio lorem eget velit. Morbi eleifend id ligula vitae
181
+ vulputate. Suspendisse ac laoreet justo. Proin eu mattis diam.
182
+ </p>
183
+ </Suspense>
184
+ <Suspense fallback={null}>
185
+ <p>
186
+ Nunc in ex quis enim ullamcorper scelerisque eget ac eros. Class
187
+ aptent taciti sociosqu ad litora torquent per conubia nostra, per
188
+ inceptos himenaeos. Aliquam turpis dui, egestas a rhoncus non,
189
+ fermentum in tellus. Vestibulum ante ipsum primis in faucibus orci
190
+ luctus et ultrices posuere cubilia curae; Aenean non risus arcu. Nam
191
+ ultricies lacinia volutpat. Class aptent taciti sociosqu ad litora
192
+ torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor
193
+ sit amet, consectetur adipiscing elit.
194
+ </p>
195
+ </Suspense>
196
+ <Suspense fallback={null}>
197
+ <p>
198
+ Aliquam a felis leo. Proin lorem ipsum, congue eu cursus in, rhoncus
199
+ ut libero. Vestibulum sit amet consequat nunc. Ut eleifend lobortis
200
+ lacus, vel molestie metus viverra eget. Nullam suscipit eu magna
201
+ scelerisque suscipit. Donec dictum in diam nec lacinia. Mauris
202
+ pellentesque ex ut purus facilisis, eget placerat turpis semper. Sed
203
+ dapibus lorem ante, et malesuada dui eleifend ac. Sed diam felis,
204
+ semper ac nulla vel, posuere ultricies ante.
205
+ </p>
206
+ </Suspense>
207
+ <Suspense fallback={null}>
208
+ <p>
209
+ Nunc elementum odio sapien, sit amet vulputate lorem varius at. Fusce
210
+ non sapien vitae lorem aliquam pretium sit amet congue dolor. Nunc
211
+ quis tortor luctus, pretium ex a, tincidunt urna. Aliquam fermentum
212
+ massa a erat pharetra varius. Curabitur at auctor dui. Sed posuere
213
+ pellentesque massa, vel bibendum urna dictum non. Fusce eget rhoncus
214
+ urna. Maecenas sed lectus tellus. Pellentesque convallis dapibus nisl
215
+ vitae venenatis. Quisque ornare a dolor ac pharetra. Nam cursus, mi a
216
+ lacinia accumsan, felis erat fringilla magna, ac mattis nunc ante a
217
+ orci.
218
+ </p>
219
+ </Suspense>
220
+ <Suspense fallback={null}>
221
+ <p>
222
+ Nunc vel tortor euismod, commodo tortor non, aliquam nisi. Maecenas
223
+ tempus mollis velit non suscipit. Mauris sit amet dolor sed ex
224
+ fringilla varius. Suspendisse vel cursus risus. Vivamus pharetra massa
225
+ nec dolor aliquam feugiat. Fusce finibus enim commodo, scelerisque
226
+ ante eu, laoreet ex. Curabitur placerat magna quis imperdiet lacinia.
227
+ Etiam lectus mauris, porttitor ac lacinia sed, posuere eget lacus.
228
+ Mauris vulputate mattis imperdiet. Nunc id aliquet libero, vitae
229
+ hendrerit purus. Praesent vestibulum urna ac egestas tempor. In
230
+ molestie, nunc sit amet sagittis dapibus, ligula enim fermentum mi,
231
+ lacinia molestie eros dui in tortor. Mauris fermentum pulvinar
232
+ faucibus. Curabitur laoreet eleifend purus, non tincidunt tortor
233
+ gravida nec. Nam eu lectus congue, commodo libero et, porttitor est.
234
+ Nullam tincidunt, nisi eu congue congue, magna justo commodo massa,
235
+ nec efficitur dui lectus non sem.
236
+ </p>
237
+ </Suspense>
238
+ <Suspense fallback={null}>
239
+ <p>
240
+ Nullam vehicula, ipsum quis lacinia tristique, elit nulla dignissim
241
+ augue, at pulvinar metus justo ac magna. Nullam nec nunc ac sapien
242
+ mollis cursus eu ac enim. Pellentesque a pharetra erat. Ut tempor
243
+ magna nisi, accumsan blandit lectus volutpat nec. Vivamus vel lorem
244
+ nec eros blandit dictum eget ac diam. Nulla nec turpis dolor. Morbi eu
245
+ euismod libero. Nam ut tortor at arcu porta tincidunt. In gravida
246
+ ligula fringilla ornare imperdiet. Nulla scelerisque ante erat,
247
+ efficitur dictum metus ullamcorper vel. Nam ac purus metus. Maecenas
248
+ eget tempus nulla. Ut magna lorem, efficitur ut ex a, semper aliquam
249
+ magna. Praesent lobortis, velit ac posuere mattis, justo est accumsan
250
+ turpis, id sagittis felis mi in lacus.
251
+ </p>
252
+ </Suspense>
253
+ <Suspense fallback={null}>
254
+ <p>
255
+ Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
256
+ consequat sem quis sem consequat, non aliquam est placerat. Cras
257
+ malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
258
+ velit et ex interdum, vel lobortis ante vestibulum. Nam placerat
259
+ lectus eu commodo efficitur. Pellentesque in nunc ac massa porttitor
260
+ eleifend ut efficitur sem. Aenean at magna auctor, posuere augue in,
261
+ ultrices arcu. Praesent dignissim augue ex, malesuada maximus metus
262
+ interdum a. Proin nec odio in nulla vestibulum.
263
+ </p>
264
+ </Suspense>
265
+ <Suspense fallback={null}>
266
+ <p>
267
+ Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
268
+ consequat sem quis sem consequat, non aliquam est placerat. Cras
269
+ malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
270
+ velit et ex interdum, vel lobortis ante vestibulum. Nam placerat
271
+ lectus eu commodo efficitur. Pellentesque in nunc ac massa porttitor
272
+ eleifend ut efficitur sem. Aenean at magna auctor, posuere augue in,
273
+ ultrices arcu. Praesent dignissim augue ex, malesuada maximus metus
274
+ interdum a. Proin nec odio in nulla vestibulum.
275
+ </p>
276
+ </Suspense>
277
+ <Suspense fallback={null}>
278
+ <p>
279
+ Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
280
+ consequat sem quis sem consequat, non aliquam est placerat. Cras
281
+ malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
282
+ velit et ex interdum, vel lobortis ante vestibulum. Nam placerat
283
+ lectus eu commodo efficitur. Pellentesque in nunc ac massa porttitor
284
+ eleifend ut efficitur sem. Aenean at magna auctor, posuere augue in,
285
+ ultrices arcu. Praesent dignissim augue ex, malesuada maximus metus
286
+ interdum a. Proin nec odio in nulla vestibulum.
287
+ </p>
288
+ </Suspense>
289
</Fragment>
290
);
291
}
packages/react-server/src/ReactFizzServer.js
+22
-4
@@ -404,7 +404,10 @@ function isEligibleForOutlining(
404
request: Request,
405
boundary: SuspenseBoundary,
406
): boolean {
407
- return boundary.byteSize > request.progressiveChunkSize;
407
+ // For very small boundaries, don't bother producing a fallback for outlining.
408
+ // The larger this limit is, the more we can save on preparing fallbacks in case we end up
409
+ // outlining.
410
+ return boundary.byteSize > 500;
411
}
412
413
function defaultErrorHandler(error: mixed) {
@@ -4902,6 +4905,10 @@ function flushSubtree(
4905
}
4906
}
4907
4908
+// Running count for how much bytes of boundaries have flushed inlined into the currently
4909
+// flushing root or completed boundary.
4910
+let flushedByteSize = 0;
4911
+
4912
function flushSegment(
4913
request: Request,
4914
destination: Destination,
@@ -4971,9 +4978,14 @@ function flushSegment(
4978
flushSubtree(request, destination, segment, hoistableState);
4979
4980
return writeEndPendingSuspenseBoundary(destination, request.renderState);
4974
- } else if (isEligibleForOutlining(request, boundary)) {
4975
- // This boundary is large and will be emitted separately so that we can progressively show
4976
- // other content. We add it to the queue during the flush because we have to ensure that
4981
+ } else if (
4982
+ isEligibleForOutlining(request, boundary) &&
4983
+ flushedByteSize + boundary.byteSize > request.progressiveChunkSize
4984
+ ) {
4985
+ // Inlining this boundary would make the current sequence being written too large
4986
+ // and block the parent for too long. Instead, it will be emitted separately so that we
4987
+ // can progressively show other content.
4988
+ // We add it to the queue during the flush because we have to ensure that
4989
// the parent flushes first so that there's something to inject it into.
4990
// We also have to make sure that it's emitted into the queue in a deterministic slot.
4991
// I.e. we can't insert it here when it completes.
@@ -4999,6 +5011,8 @@ function flushSegment(
5011
5012
return writeEndPendingSuspenseBoundary(destination, request.renderState);
5013
} else {
5014
+ // We're inlining this boundary so its bytes get counted to the current running count.
5015
+ flushedByteSize += boundary.byteSize;
5016
if (hoistableState) {
5017
hoistHoistables(hoistableState, boundary.contentState);
5018
}
@@ -5071,6 +5085,7 @@ function flushCompletedBoundary(
5085
destination: Destination,
5086
boundary: SuspenseBoundary,
5087
): boolean {
5088
+ flushedByteSize = boundary.byteSize; // Start counting bytes
5089
const completedSegments = boundary.completedSegments;
5090
let i = 0;
5091
for (; i < completedSegments.length; i++) {
@@ -5098,6 +5113,7 @@ function flushPartialBoundary(
5113
destination: Destination,
5114
boundary: SuspenseBoundary,
5115
): boolean {
5116
+ flushedByteSize = boundary.byteSize; // Start counting bytes
5117
const completedSegments = boundary.completedSegments;
5118
let i = 0;
5119
for (; i < completedSegments.length; i++) {
@@ -5191,6 +5207,8 @@ function flushCompletedQueues(
5207
return;
5208
}
5209
5210
+ flushedByteSize = request.byteSize; // Start counting bytes
5211
+ // TODO: Count the size of the preamble chunks too.
5212
flushPreamble(
5213
request,
5214
destination,