React 19のpreloadとpreinitで先に読み込む方法

import { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { preload, preinit } from 'react-dom';

function App() {
  const [count, setCount] = useState(0);
  // 描画のたびに呼ばれるが、同じ href なら1回分の効果になる
  preload('/assets/style.css', { as: 'style' });
  preload('/assets/font.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
  preload('/assets/preloaded.js', { as: 'script' });
  preinit('/assets/run.js', { as: 'script' });
  return (
    <>
      <p className="sample">サンプル</p>
      <button id="rerender" onClick={() => setCount(count + 1)}>
        描画し直す（{count}）
      </button>
    </>
  );
}

createRoot(document.getElementById('root')!).render(<App />);

--- 「描画し直す」を3回押したあと ---
ボタン: 描画し直す（3）
<link rel="preload" href="/assets/style.css" as="style">
<link rel="preload" href="/assets/font.woff2" as="font" crossorigin="" type="font/woff2">
<link rel="preload" href="/assets/preloaded.js" as="script">
<script src="/assets/run.js" async=""></script>
--- サーバーが受けた /assets/ の要求 ---
/assets/style.css
/assets/font.woff2
/assets/preloaded.js
/assets/run.js
--- スクリプトが実行されたか ---
{"runCount":1,"preloadedRan":null}
--- p.sample の色（style.css は preload しただけ） ---
rgb(0, 0, 0)

// ?order=high-first なら high を先に、low-first なら low を先に呼ぶ
const order = new URLSearchParams(location.search).get('order');

function App() {
  if (order === 'high-first') {
    preinit('/assets/high.css', { as: 'style', precedence: 'high' });
    preinit('/assets/low.css', { as: 'style', precedence: 'low' });
  } else {
    preinit('/assets/low.css', { as: 'style', precedence: 'low' });
    preinit('/assets/high.css', { as: 'style', precedence: 'high' });
  }
  return <p className="sample">どちらの色になるか</p>;
}

--- order=low-first ---
<link rel="stylesheet" href="/assets/low.css" data-precedence="low">
<link rel="stylesheet" href="/assets/high.css" data-precedence="high">
p.sample の色: rgb(255, 0, 0)
--- order=high-first ---
<link rel="stylesheet" href="/assets/high.css" data-precedence="high">
<link rel="stylesheet" href="/assets/low.css" data-precedence="low">
p.sample の色: rgb(0, 0, 255)

// Wizard.tsx
import { preinit } from 'react-dom';

export default function Wizard() {
  preinit('/assets/wizard.css', { as: 'style', precedence: 'default' });
  return <section id="wizard">ウィザードの1ページ目</section>;
}

const params = new URLSearchParams(location.search);
// ?link=1 のときは、preinit の代わりに <link precedence> を描画する版を使う
const Wizard = params.get('link') === '1' ? lazy(() => import('./WizardLink')) : lazy(() => import('./Wizard'));
// ?preload=1 のときだけ、クリックした時点で CSS の読み込みを始める
const early = params.get('preload') === '1';

function App() {
  const [open, setOpen] = useState(false);
  const onClick = () => {
    if (early) {
      preload('/assets/wizard.css', { as: 'style' });
    }
    setOpen(true);
  };
  return (
    <>
      <button id="start" onClick={onClick}>ウィザードを始める</button>
      {open && (
        <Suspense fallback={<p id="loading">読み込み中…</p>}>
          <Wizard />
        </Suspense>
      )}
    </>
  );
}

--- preload=0 ---
Wizard のコード: クリックから 2ms で要求、606ms で届いた
wizard.css: クリックから 611ms で要求、914ms で届いた（要求 1 回）
#wizard が画面に入った: クリックから 623ms（そのときの色 rgb(0, 0, 0)）
#wizard に wizard.css の色が付いた: クリックから 923ms
head: <link rel="stylesheet" href="/assets/wizard.css" data-precedence="default">
--- preload=1 ---
Wizard のコード: クリックから 4ms で要求、608ms で届いた
wizard.css: クリックから 2ms で要求、306ms で届いた（要求 1 回）
#wizard が画面に入った: クリックから 623ms（そのときの色 rgb(216, 88, 120)）
#wizard に wizard.css の色が付いた: クリックから 623ms
head: <link rel="stylesheet" href="/assets/wizard.css" data-precedence="default"> <link rel="preload" href="/assets/wizard.css" as="style">

// WizardLink.tsx
export default function WizardLink() {
  return (
    <section id="wizard">
      <link rel="stylesheet" href="/assets/wizard.css" precedence="default" />
      ウィザードの1ページ目
    </section>
  );
}

--- link=1 ---
Wizard のコード: クリックから 2ms で要求、605ms で届いた
wizard.css: クリックから 611ms で要求、914ms で届いた（要求 1 回）
#wizard が画面に入った: クリックから 924ms（そのときの色 rgb(216, 88, 120)）
#wizard に wizard.css の色が付いた: クリックから 924ms

function App() {
  preload('/assets/font.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
  preload('/assets/preloaded.js', { as: 'script' });
  preinit('/assets/style.css', { as: 'style', precedence: 'default' });
  preinit('/assets/run.js', { as: 'script' });
  return <p className="sample">本文</p>;
}

<!DOCTYPE html><html><head>
<link rel="preload" href="/assets/font.woff2" as="font" crossorigin="" type="font/woff2"/>
<link rel="stylesheet" href="/assets/style.css" data-precedence="default"/>
<script src="/assets/run.js" async=""></script>
<link rel="preload" href="/assets/preloaded.js" as="script"/>
<title>ページ</title></head><body><p class="sample">本文</p></body></html>

<!DOCTYPE html><html><head></head><body><p>描画の外で呼ぶ</p></body></html>