React 19でハイドレーションエラーの表示はどう変わったか

const isServer = typeof window === 'undefined';

function Status({ scenario }: { scenario: Scenario }) {
  if (scenario === 'text') {
    // 文字が食い違う
    return <p>描いた場所：{isServer ? 'サーバー' : 'ブラウザ'}</p>;
  }
  if (scenario === 'attr') {
    // 属性（className）だけが食い違う
    return <p className={isServer ? 'status-server' : 'status-browser'}>発送の準備中です</p>;
  }
  // （中略）
  if (scenario === 'element') {
    // 要素の種類が食い違う
    return isServer ? <p>発送の準備中です</p> : <div>発送の準備中です</div>;
  }
  return <p>発送の準備中です</p>;
}

hydrateRoot(document.getElementById('root')!, <App scenario={window.SCENARIO} />);

[1] console.error:
Warning: Text content did not match. Server: "サーバー" Client: "ブラウザ"
    at p
    at Status (http://localhost:4173/client.js:24513:21)
    at section
    at OrderSummary (http://localhost:4173/client.js:24507:27)
（中略）
[2] console.error:
Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
[3] window の error イベント:
Text content does not match server-rendered HTML.
[4] window の error イベント:
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  <App scenario="text">
    <main>
      <h1>
      <OrderSummary scenario="text">
        <section>
          <p>
          <Status scenario="text">
            <p>
+             ブラウザ
-             サーバー

[1] console.error:
Warning: Expected server HTML to contain a matching <div> in <section>.
（中略）
[2] window の error イベント:
Hydration failed because the initial UI does not match what was rendered on the server.
[3] console.error:
Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
[4] window の error イベント:
Hydration failed because the initial UI does not match what was rendered on the server.
[5] window の error イベント:
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

  <App scenario="element">
    <main>
      <h1>
      <OrderSummary scenario="element">
        <section>
          <p>
          <Status scenario="element">
+           <div>
-           <p>

Warning: Prop `className` did not match. Server: "status-server" Client: "status-browser"
（部品の並びは略）

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
（原因の一覧とリンクは文字の食い違いのときと同じなので略）
  <App scenario="attr">
    <main>
      <h1>
      <OrderSummary scenario="attr">
        <section>
          <p>
          <Status scenario="attr">
            <p
+             className="status-browser"
-             className="status-server"
            >
+             発送の準備中です

Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

function WhereRendered() {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);
  return <p>描いた場所：{isClient ? 'ブラウザ' : 'サーバー'}</p>;
}