Skip to content

Commit 1cb760d

Browse files
jerrydev0927jerrydev0927
committed
[Fizz] Encode external fizz runtime into chunks eagerly (#26752)
in facebook/react#26738 we added nonce to the ResponseState. Initially it was used in a variety of places but the version that got merged only included it with the external fizz runtime. This PR updates the config for the external fizz runtime so that the nonce is encoded into the script chunks at request creation time. The rationale is that for live-requests, streaming is more likely than not so doing the encoding work at the start is better than during flush. For cases such as SSG where the runtime is not required the extra encoding is tolerable (not a live request). Bots are an interesting case because if you want fastest TTFB you will end up requiring the runtime but if you are withholding until the stream is done you have already sacrificed fastest TTFB and the marginal slowdown of the extraneous encoding is hopefully neglibible I'm writing this so later if we learn that this tradeoff isn't worth it we at least understand why I made the change in the first place. DiffTrain build for [8ea96ef84d8f08ed1846dec9e8ed20d2225db0d3](facebook/react@8ea96ef)
1 parent 9efca11 commit 1cb760d

7 files changed

+213
-175
lines changed

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
491aec5d6113ce5bae7c10966bc38a4a8fc091a8
1+
8ea96ef84d8f08ed1846dec9e8ed20d2225db0d3

‎compiled/facebook-www/ReactDOMServer-dev.classic.js

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-classic-cc24eed6";
22+
var ReactVersion = "18.3.0-www-classic-fcee71d2";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -2415,7 +2415,7 @@ function createResponseState$1(
24152415
'<script nonce="' + escapeTextForBrowser(nonce) + '">'
24162416
);
24172417
var bootstrapChunks = [];
2418-
var externalRuntimeDesc = null;
2418+
var externalRuntimeScript = null;
24192419
var streamingFormat = ScriptStreamingFormat;
24202420

24212421
if (bootstrapScriptContent !== undefined) {
@@ -2431,12 +2431,27 @@ function createResponseState$1(
24312431
streamingFormat = DataStreamingFormat;
24322432

24332433
if (typeof externalRuntimeConfig === "string") {
2434-
externalRuntimeDesc = {
2434+
externalRuntimeScript = {
24352435
src: externalRuntimeConfig,
2436-
integrity: undefined
2436+
chunks: []
24372437
};
2438+
pushScriptImpl(externalRuntimeScript.chunks, {
2439+
src: externalRuntimeConfig,
2440+
async: true,
2441+
integrity: undefined,
2442+
nonce: nonce
2443+
});
24382444
} else {
2439-
externalRuntimeDesc = externalRuntimeConfig;
2445+
externalRuntimeScript = {
2446+
src: externalRuntimeConfig.src,
2447+
chunks: []
2448+
};
2449+
pushScriptImpl(externalRuntimeScript.chunks, {
2450+
src: externalRuntimeConfig.src,
2451+
async: true,
2452+
integrity: externalRuntimeConfig.integrity,
2453+
nonce: nonce
2454+
});
24402455
}
24412456
}
24422457
}
@@ -2514,7 +2529,7 @@ function createResponseState$1(
25142529
streamingFormat: streamingFormat,
25152530
startInlineScript: inlineScriptWithNonce,
25162531
instructions: NothingSent,
2517-
externalRuntimeConfig: externalRuntimeDesc,
2532+
externalRuntimeScript: externalRuntimeScript,
25182533
htmlChunks: null,
25192534
headChunks: null,
25202535
hasBody: false,
@@ -6194,16 +6209,16 @@ function writePreamble(
61946209
willFlushAllSegments
61956210
) {
61966211
// This function must be called exactly once on every request
6197-
if (!willFlushAllSegments && responseState.externalRuntimeConfig) {
6212+
if (!willFlushAllSegments && responseState.externalRuntimeScript) {
61986213
// If the root segment is incomplete due to suspended tasks
61996214
// (e.g. willFlushAllSegments = false) and we are using data
62006215
// streaming format, ensure the external runtime is sent.
62016216
// (User code could choose to send this even earlier by calling
62026217
// preinit(...), if they know they will suspend).
6203-
var _responseState$extern = responseState.externalRuntimeConfig,
6218+
var _responseState$extern = responseState.externalRuntimeScript,
62046219
src = _responseState$extern.src,
6205-
integrity = _responseState$extern.integrity;
6206-
internalPreinitScript(resources, src, integrity, responseState.nonce);
6220+
chunks = _responseState$extern.chunks;
6221+
internalPreinitScript(resources, src, chunks);
62076222
}
62086223

62096224
var htmlChunks = responseState.htmlChunks;
@@ -6258,10 +6273,10 @@ function writePreamble(
62586273

62596274
if (resources.stylesMap.has(key));
62606275
else {
6261-
var chunks = resource.chunks;
6276+
var _chunks = resource.chunks;
62626277

6263-
for (i = 0; i < chunks.length; i++) {
6264-
writeChunk(destination, chunks[i]);
6278+
for (i = 0; i < _chunks.length; i++) {
6279+
writeChunk(destination, _chunks[i]);
62656280
}
62666281
}
62676282
});
@@ -7425,29 +7440,21 @@ function preinit(href, options) {
74257440
}
74267441
}
74277442
}
7428-
} // This method is trusted. It must only be called from within this codebase and it assumes the arguments
7429-
// conform to the types because no user input is being passed in. It also assumes that it is being called as
7430-
// part of a work or flush loop and therefore does not need to request Fizz to flush Resources.
7443+
}
74317444

7432-
function internalPreinitScript(resources, src, integrity, nonce) {
7445+
function internalPreinitScript(resources, src, chunks) {
74337446
var key = getResourceKey("script", src);
74347447
var resource = resources.scriptsMap.get(key);
74357448

74367449
if (!resource) {
74377450
resource = {
74387451
type: "script",
7439-
chunks: [],
7452+
chunks: chunks,
74407453
state: NoState,
74417454
props: null
74427455
};
74437456
resources.scriptsMap.set(key, resource);
74447457
resources.scripts.add(resource);
7445-
pushScriptImpl(resource.chunks, {
7446-
async: true,
7447-
src: src,
7448-
integrity: integrity,
7449-
nonce: nonce
7450-
});
74517458
}
74527459

74537460
return;
@@ -7627,7 +7634,7 @@ function createResponseState(
76277634
streamingFormat: responseState.streamingFormat,
76287635
startInlineScript: responseState.startInlineScript,
76297636
instructions: responseState.instructions,
7630-
externalRuntimeConfig: responseState.externalRuntimeConfig,
7637+
externalRuntimeScript: responseState.externalRuntimeScript,
76317638
htmlChunks: responseState.htmlChunks,
76327639
headChunks: responseState.headChunks,
76337640
hasBody: responseState.hasBody,
@@ -7636,7 +7643,6 @@ function createResponseState(
76367643
preloadChunks: responseState.preloadChunks,
76377644
hoistableChunks: responseState.hoistableChunks,
76387645
stylesToHoist: responseState.stylesToHoist,
7639-
nonce: responseState.nonce,
76407646
// This is an extra field for the legacy renderer
76417647
generateStaticMarkup: generateStaticMarkup
76427648
};

‎compiled/facebook-www/ReactDOMServer-dev.modern.js

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-modern-10c90c32";
22+
var ReactVersion = "18.3.0-www-modern-938c86f0";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -2415,7 +2415,7 @@ function createResponseState$1(
24152415
'<script nonce="' + escapeTextForBrowser(nonce) + '">'
24162416
);
24172417
var bootstrapChunks = [];
2418-
var externalRuntimeDesc = null;
2418+
var externalRuntimeScript = null;
24192419
var streamingFormat = ScriptStreamingFormat;
24202420

24212421
if (bootstrapScriptContent !== undefined) {
@@ -2431,12 +2431,27 @@ function createResponseState$1(
24312431
streamingFormat = DataStreamingFormat;
24322432

24332433
if (typeof externalRuntimeConfig === "string") {
2434-
externalRuntimeDesc = {
2434+
externalRuntimeScript = {
24352435
src: externalRuntimeConfig,
2436-
integrity: undefined
2436+
chunks: []
24372437
};
2438+
pushScriptImpl(externalRuntimeScript.chunks, {
2439+
src: externalRuntimeConfig,
2440+
async: true,
2441+
integrity: undefined,
2442+
nonce: nonce
2443+
});
24382444
} else {
2439-
externalRuntimeDesc = externalRuntimeConfig;
2445+
externalRuntimeScript = {
2446+
src: externalRuntimeConfig.src,
2447+
chunks: []
2448+
};
2449+
pushScriptImpl(externalRuntimeScript.chunks, {
2450+
src: externalRuntimeConfig.src,
2451+
async: true,
2452+
integrity: externalRuntimeConfig.integrity,
2453+
nonce: nonce
2454+
});
24402455
}
24412456
}
24422457
}
@@ -2514,7 +2529,7 @@ function createResponseState$1(
25142529
streamingFormat: streamingFormat,
25152530
startInlineScript: inlineScriptWithNonce,
25162531
instructions: NothingSent,
2517-
externalRuntimeConfig: externalRuntimeDesc,
2532+
externalRuntimeScript: externalRuntimeScript,
25182533
htmlChunks: null,
25192534
headChunks: null,
25202535
hasBody: false,
@@ -6194,16 +6209,16 @@ function writePreamble(
61946209
willFlushAllSegments
61956210
) {
61966211
// This function must be called exactly once on every request
6197-
if (!willFlushAllSegments && responseState.externalRuntimeConfig) {
6212+
if (!willFlushAllSegments && responseState.externalRuntimeScript) {
61986213
// If the root segment is incomplete due to suspended tasks
61996214
// (e.g. willFlushAllSegments = false) and we are using data
62006215
// streaming format, ensure the external runtime is sent.
62016216
// (User code could choose to send this even earlier by calling
62026217
// preinit(...), if they know they will suspend).
6203-
var _responseState$extern = responseState.externalRuntimeConfig,
6218+
var _responseState$extern = responseState.externalRuntimeScript,
62046219
src = _responseState$extern.src,
6205-
integrity = _responseState$extern.integrity;
6206-
internalPreinitScript(resources, src, integrity, responseState.nonce);
6220+
chunks = _responseState$extern.chunks;
6221+
internalPreinitScript(resources, src, chunks);
62076222
}
62086223

62096224
var htmlChunks = responseState.htmlChunks;
@@ -6258,10 +6273,10 @@ function writePreamble(
62586273

62596274
if (resources.stylesMap.has(key));
62606275
else {
6261-
var chunks = resource.chunks;
6276+
var _chunks = resource.chunks;
62626277

6263-
for (i = 0; i < chunks.length; i++) {
6264-
writeChunk(destination, chunks[i]);
6278+
for (i = 0; i < _chunks.length; i++) {
6279+
writeChunk(destination, _chunks[i]);
62656280
}
62666281
}
62676282
});
@@ -7425,29 +7440,21 @@ function preinit(href, options) {
74257440
}
74267441
}
74277442
}
7428-
} // This method is trusted. It must only be called from within this codebase and it assumes the arguments
7429-
// conform to the types because no user input is being passed in. It also assumes that it is being called as
7430-
// part of a work or flush loop and therefore does not need to request Fizz to flush Resources.
7443+
}
74317444

7432-
function internalPreinitScript(resources, src, integrity, nonce) {
7445+
function internalPreinitScript(resources, src, chunks) {
74337446
var key = getResourceKey("script", src);
74347447
var resource = resources.scriptsMap.get(key);
74357448

74367449
if (!resource) {
74377450
resource = {
74387451
type: "script",
7439-
chunks: [],
7452+
chunks: chunks,
74407453
state: NoState,
74417454
props: null
74427455
};
74437456
resources.scriptsMap.set(key, resource);
74447457
resources.scripts.add(resource);
7445-
pushScriptImpl(resource.chunks, {
7446-
async: true,
7447-
src: src,
7448-
integrity: integrity,
7449-
nonce: nonce
7450-
});
74517458
}
74527459

74537460
return;
@@ -7627,7 +7634,7 @@ function createResponseState(
76277634
streamingFormat: responseState.streamingFormat,
76287635
startInlineScript: responseState.startInlineScript,
76297636
instructions: responseState.instructions,
7630-
externalRuntimeConfig: responseState.externalRuntimeConfig,
7637+
externalRuntimeScript: responseState.externalRuntimeScript,
76317638
htmlChunks: responseState.htmlChunks,
76327639
headChunks: responseState.headChunks,
76337640
hasBody: responseState.hasBody,
@@ -7636,7 +7643,6 @@ function createResponseState(
76367643
preloadChunks: responseState.preloadChunks,
76377644
hoistableChunks: responseState.hoistableChunks,
76387645
stylesToHoist: responseState.stylesToHoist,
7639-
nonce: responseState.nonce,
76407646
// This is an extra field for the legacy renderer
76417647
generateStaticMarkup: generateStaticMarkup
76427648
};

0 commit comments

Comments
 (0)