Skip to content

[Fizz] Deduplicate <link rel="preload"> from Flight preload hints #607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
everettbu wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Fizz] Deduplicate <link rel="preload"> from Flight preload hints #607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .yarnrc.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
nodeLinker: node-modules
4 changes: 2 additions & 2 deletions packages/react-cache/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"description": "A basic cache for React applications",
"version": "2.0.0-alpha.0",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-cache"
},
"files": [
Expand Down
4 changes: 2 additions & 2 deletions packages/react-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"cjs/"
],
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-client"
},
"engines": {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-debug-tools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
],
"main": "index.js",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-debug-tools"
},
"engines": {
Expand Down
5 changes: 3 additions & 2 deletions packages/react-devtools-fusebox/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "react-devtools-fusebox",
"version": "0.0.0",
"private": "true",
"license": "MIT",
"files": ["dist"],
"files": [
"dist"
],
"scripts": {
"build:frontend:copy-types": "cp src/*.d.ts dist/",
"build:frontend:local": "cross-env NODE_ENV=development webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",
Expand Down
4 changes: 2 additions & 2 deletions packages/react-devtools-shared/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
"jsc-safe-url": "^0.2.4",
"json5": "^2.2.3",
"local-storage-fallback": "^4.1.1",
"rbush": "4.0.1",
"react-virtualized-auto-sizer": "^1.0.23",
"react-window": "^1.8.10",
"rbush": "4.0.1"
"react-window": "^1.8.10"
}
}
4 changes: 1 addition & 3 deletions packages/react-devtools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-devtools"
},
"bin": {
"react-devtools": "./bin.js"
},
"bin": "./bin.js",
"files": [
"bin.js",
"app.html",
Expand Down
60 changes: 60 additions & 0 deletions packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3018,6 +3018,66 @@ function pushLink(
// boundaries in fallback are awaited or client render, in either case there is never hydration
return null;
} else {
if (rel === 'preload') {
// Preload links can be deduplicated against preloads initiated via the
// imperative preload() API or received as Flight hints. We check and
// register in resumableState to avoid duplicate link tags.
const as = props.as;
if (typeof as === 'string') {
switch (as) {
case 'image': {
const imageSrcSet =
typeof props.imageSrcSet === 'string'
? props.imageSrcSet
: undefined;
const imageSizes =
typeof props.imageSizes === 'string'
? props.imageSizes
: undefined;
const key = getImageResourceKey(href, imageSrcSet, imageSizes);
if (resumableState.imageResources.hasOwnProperty(key)) {
return null;
}
resumableState.imageResources[key] = PRELOAD_NO_CREDS;

@greptile-apps greptile-apps Bot Feb 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Credentials not preserved for style/script preloads

For as="style" and as="script", the preload() function (lines 6470-6475, 6493-6498) conditionally stores [options.crossOrigin, options.integrity] when those props are present, so that later <link rel="stylesheet"> or <script> elements can adopt those credentials via adoptPreloadCredentials(). Here, all resource types unconditionally store PRELOAD_NO_CREDS.

This means if a <link rel="preload" as="style" crossorigin="anonymous" integrity="sha256-..."> is rendered in RSC and registers here before the Flight hint's preload() call, the credential information is lost in resumableState. A later <link rel="stylesheet"> for the same href would not be able to adopt crossOrigin/integrity from the preload state (the check at line 2952 preloadState.length === 2 would fail).

In practice this is likely low-impact since the <link> element itself will still be in the HTML with the correct attributes, and stylesheets typically carry their own credentials. But for consistency with the preload() API, the style and script cases could store credential info from props.crossOrigin and props.integrity when present.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
Line: 3041

Comment:
**Credentials not preserved for style/script preloads**

For `as="style"` and `as="script"`, the `preload()` function (lines 6470-6475, 6493-6498) conditionally stores `[options.crossOrigin, options.integrity]` when those props are present, so that later `<link rel="stylesheet">` or `<script>` elements can adopt those credentials via `adoptPreloadCredentials()`. Here, all resource types unconditionally store `PRELOAD_NO_CREDS`.

This means if a `<link rel="preload" as="style" crossorigin="anonymous" integrity="sha256-...">` is rendered in RSC and registers here before the Flight hint's `preload()` call, the credential information is lost in `resumableState`. A later `<link rel="stylesheet">` for the same `href` would not be able to adopt `crossOrigin`/`integrity` from the preload state (the check at line 2952 `preloadState.length === 2` would fail).

In practice this is likely low-impact since the `<link>` element itself will still be in the HTML with the correct attributes, and stylesheets typically carry their own credentials. But for consistency with the `preload()` API, the `style` and `script` cases could store credential info from `props.crossOrigin` and `props.integrity` when present.

How can I resolve this? If you propose a fix, please make it concise.

break;
}
case 'style': {
const key = getResourceKey(href);
if (resumableState.styleResources.hasOwnProperty(key)) {
return null;
}
resumableState.styleResources[key] = PRELOAD_NO_CREDS;
break;
}
case 'script': {
const key = getResourceKey(href);
if (resumableState.scriptResources.hasOwnProperty(key)) {
return null;
}
resumableState.scriptResources[key] = PRELOAD_NO_CREDS;
break;
}
default: {
// font, audio, video, document, embed, fetch, object, track, worker, and others
const key = getResourceKey(href);
const hasAsType =
resumableState.unknownResources.hasOwnProperty(as);
let resources;
if (hasAsType) {
resources = resumableState.unknownResources[as];
if (resources.hasOwnProperty(key)) {
return null;
}
} else {
resources = ({}: ResumableState['unknownResources']['asType']);
resumableState.unknownResources[as] = resources;
}
resources[key] = PRELOAD_NO_CREDS;
break;
}
}
}
}
return pushLinkImpl(renderState.hoistableChunks, props);
}
}
Expand Down
6 changes: 3 additions & 3 deletions packages/react-noop-renderer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
"description": "React package for testing the Fiber, Fizz and Flight reconcilers.",
"main": "index.js",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-noop-renderer"
},
"license": "MIT",
"dependencies": {
"react-reconciler": "*",
"react-client": "*",
"react-reconciler": "*",
"react-server": "*"
},
"peerDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-server-dom-esm/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
},
"main": "index.js",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-server-dom-esm"
},
"engines": {
Expand Down
81 changes: 81 additions & 0 deletions packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1978,6 +1978,87 @@ describe('ReactFlightDOM', () => {
expect(hintRows.length).toEqual(6);
});

it('does not duplicate font preload links from Flight hints during Fizz SSR', async () => {
async function ServerComponent() {
return (
<html>
<head>
<link
rel="preload"
as="font"
href="font-resource"
type="font/woff2"
/>
</head>
</html>
);
}

const {writable: flightWritable, readable: flightReadable} =
getTestStream();
const {pipe} = await serverAct(() =>
ReactServerDOMServer.renderToPipeableStream(
<ServerComponent />,
webpackMap,
),
);
pipe(flightWritable);

let response = null;
function getResponse() {
if (response === null) {
response =
ReactServerDOMClient.createFromReadableStream(flightReadable);
}
return response;
}

function App() {
return (
<html>
<body>{getResponse()}</body>
</html>
);
}

const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
await serverAct(async () => {
ReactDOMFizzServer.renderToPipeableStream(<App />).pipe(fizzWritable);
});

async function read(stream) {
const decoder = new TextDecoder();
const reader = stream.getReader();
let buffer = '';
while (true) {
const {done, value} = await reader.read();
if (done) {
buffer += decoder.decode();
break;
}
buffer += decoder.decode(value, {stream: true});
}
return buffer;
}

const html = await read(fizzReadable);
// The font preload should only appear once, from the Flight hint.
// It should not be duplicated by the rendered <link> element.
expect(html).toEqual(
'<!DOCTYPE html><html><head>' +
'<link rel="preload" href="font-resource" as="font" type="font/woff2"/>' +
(gate(flags => flags.enableFizzBlockingRender)
? '<link rel="expect" href="#_R_" blocking="render"/>'
: '') +
'</head>' +
'<body><html><head></head></html>' +
(gate(flags => flags.enableFizzBlockingRender)
? '<template id="_R_"></template>'
: '') +
'</body></html>',
);
});

it('preloads resources without needing to render them', async () => {
function NoScriptComponent() {
return (
Expand Down
4 changes: 2 additions & 2 deletions packages/react-server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
],
"main": "index.js",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-server"
},
"engines": {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-suspense-test-utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"version": "0.1.0",
"private": true,
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-suspense-test-utils"
},
"license": "MIT",
Expand Down
Loading
Loading