[React 19] Different behaviors with `preload` method #30056

ahce · 2024-06-23T23:16:07Z

Summary

react & react-dom version: 19.0.0-rc-3563387fe3-20240621
node version: 20.14.0

When using react's preload method, the preload link tag is not created in certain cases.
It works correctly with two link tags (OnlyLinkTags component).

Code example

const fs = require('node:fs');
const { createElement } = require('react');
const { preload, preinit } = require('react-dom');
const { renderToString } = require('react-dom/server');

const CSS = '/some.css';
const LINK_PROPS = {
  rel: 'stylesheet',
  href: CSS,
};

/**
 * Doesn't create the preload link tag
 */
const PreloadAndPreinit = () => {
  preload(CSS, { as: 'style' });
  preinit(CSS, { as: 'style' });

  return null;
};

/**
 * Doesn't create the preload link tag
 */
const PreloadAndLinkWithPrecedence = () => {
  preload(CSS, { as: 'style' });

  return createElement('link', { ...LINK_PROPS, precedence: 'custom' });
};

/**
 * Creates the preload link tag correctly into the head
 * The stylesheet link tag stays in the body, because it doesn't have precedence
 */
const PreloadAndLinkWithoutPrecedence = () => {
  preload(CSS, { as: 'style' });

  return createElement('link', LINK_PROPS);
};

/**
 * Moves both tags into the head
 */
const OnlyLinkTags = () => [
  createElement('link', {
    key: 'preload',
    rel: 'preload',
    as: 'style',
    href: CSS,
  }),
  createElement('link', { ...LINK_PROPS, key: 'link', precedence: 'custom' }),
];

[
  PreloadAndPreinit,
  PreloadAndLinkWithPrecedence,
  PreloadAndLinkWithoutPrecedence,
  OnlyLinkTags,
].forEach((Component) => {
  fs.writeFileSync(
    `_${Component.name}.html`,
    renderToString(
      createElement(
        'html',
        null,
        createElement('head'),
        createElement('body', null, createElement(Component)),
      ),
    ),
  );
});

Outputs:

PreloadAndPreinit:

preload("/some.css", { as: 'style' });
preinit("/some.css", { as: 'style' });

Current:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
  </head>
  <body></body>
</html>

Expected:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

PreloadAndLinkWithPrecedence:

preload("/some.css", { as: 'style' });

<link rel="stylesheet" href="/some.css" precedence="custom" />

Current:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="custom" />
  </head>
  <body></body>
</html>

Expected:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

PreloadAndLinkWithoutPrecedence:

preload("/some.css", { as: 'style' });

<link rel="stylesheet" href="/some.css" />

Current:

<html>
  <head>
    <link rel="preload" href="/some.css" as="style" />
  </head>
  <body>
    <link rel="stylesheet" href="/some.css" />
  </body>
</html>

Expected:

The same as current.

OnlyLinkTags:

<link rel="preload" as="style" href="/some.css" />
<link rel="stylesheet" href="/some.css" />

Current:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="custom" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

Expected:

The same as current.

The text was updated successfully, but these errors were encountered:

eps1lon · 2024-06-25T08:23:01Z

Thank you for the details. Could you include the expected behavior for each case? It's not clear at a glance which cases work as expected and which don't.

ahce · 2024-06-25T21:40:04Z

Thank you for the details. Could you include the expected behavior for each case? It's not clear at a glance which cases work as expected and which don't.

Added expected behavior! 😃

github-actions · 2024-09-23T22:04:24Z

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

gnoff · 2024-09-24T15:27:48Z

hi @ahce, the preload functions aren't a shortcut to rendering a preload tag. They are an instruction to react to inform it about a resource that will be used in the future that we can load early if we have the opportunity. When you call preload and then preinit React understands that the preload is for the same resource that the preinit is for and it chooses to emit the stylesheet itself rather than a preload of the stylesheet followed by the stylesheet. I'm not sure what your goal is with the preload tag + stylesheet tag but functionally the browser won't use it and it just increases the size of the intial HTML payload. Another reason React doesn't emit both is preloads don't always have the best prioritization. A preload link can get in the browsers way of optimizing which resources to fetch in what priority. Now in this case stylesheets have very high priority anyway so its sort of irrelevant but preloads for scripts for instance would likely accidentally bump up their priority relative to a script tag so if we're going to emit the script itself in the current flush we don't preload it too.

The reason you see both tags when you render a regular stylesheet is that without precedence the stylehseet link tag is just considered an normal tag with no hoisting or special behavior. There is no understanding in react that the link tag is related to the requested preload. in this case those tags are side by side but in a real app it's entirely possible the stylesheet is very deep in the document (since React is not going to control it's location by hoisting it up to the head) and so we assume we still need/want the preload b/c it will arrive much sooner in document order.

So to sum up. the observe behavior is intended. A call to preload is an instruction not a directive, and React uses heuristics to optimize resource loading and in the cases you outlined the stylesheet is available before we could send the preload so we omit it to save on document byte size and to avoid mis-prioritizing the resource fetch.

ahce added the React 19 label Jun 23, 2024

eps1lon added the Resolution: Needs More Information label Jun 25, 2024

github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Sep 23, 2024

eps1lon added Type: Discussion and removed Resolution: Needs More Information Resolution: Stale Automatically closed due to inactivity labels Sep 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[React 19] Different behaviors with `preload` method #30056

[React 19] Different behaviors with `preload` method #30056

ahce commented Jun 23, 2024 •

edited by eps1lon

Loading

eps1lon commented Jun 25, 2024

ahce commented Jun 25, 2024

github-actions bot commented Sep 23, 2024

gnoff commented Sep 24, 2024 •

edited

Loading

[React 19] Different behaviors with preload method #30056

[React 19] Different behaviors with preload method #30056

Comments

ahce commented Jun 23, 2024 • edited by eps1lon Loading

Summary

Code example

Outputs:

PreloadAndPreinit:

PreloadAndLinkWithPrecedence:

PreloadAndLinkWithoutPrecedence:

OnlyLinkTags:

eps1lon commented Jun 25, 2024

ahce commented Jun 25, 2024

github-actions bot commented Sep 23, 2024

gnoff commented Sep 24, 2024 • edited Loading

[React 19] Different behaviors with `preload` method #30056

[React 19] Different behaviors with `preload` method #30056

ahce commented Jun 23, 2024 •

edited by eps1lon

Loading

gnoff commented Sep 24, 2024 •

edited

Loading