React 19で、titleやmetaをコンポーネントの中に書く方法

import { useState } from 'react';

// ページごとの部品が、自分の title・meta・link を描く
function HomePage() {
  return (
    <article>
      <title>トップ | 猫の手ブログ</title>
      <meta name="description" content="猫の手ブログのトップページです。" />
      <link rel="canonical" href="https://example.com/" />
      <h1>トップ</h1>
    </article>
  );
}

export function CatPage() {
  return (
    <article>
      <title>猫の記事 | 猫の手ブログ</title>
      <meta name="description" content="猫についての記事です。" />
      <link rel="canonical" href="https://example.com/cats" />
      <h1>猫の記事</h1>
    </article>
  );
}

export function Pages() {
  const [page, setPage] = useState<'home' | 'cats' | 'none'>('home');
  return (
    <>
      <nav>
        <button onClick={() => setPage('home')}>トップ</button>
        <button onClick={() => setPage('cats')}>猫の記事</button>
        <button onClick={() => setPage('none')}>どちらも出さない</button>
      </nav>
      {page === 'home' && <HomePage />}
      {page === 'cats' && <CatPage />}
    </>
  );
}

--- 最初の描画
  document.title = "トップ | 猫の手ブログ"
  head: <meta charset="utf-8"><title>トップ | 猫の手ブログ</title><title>初期のタイトル</title><meta name="description" content="猫の手ブログのトップページです。"><link rel="canonical" href="https://example.com/">
  body: <nav><button>トップ</button><button>猫の記事</button><button>どちらも出さない</button></nav><article><h1>トップ</h1></article>

--- 「猫の記事」を押したあと
  document.title = "猫の記事 | 猫の手ブログ"
  head: <meta charset="utf-8"><title>猫の記事 | 猫の手ブログ</title><title>初期のタイトル</title><meta name="description" content="猫についての記事です。"><link rel="canonical" href="https://example.com/cats">
--- 「どちらも出さない」を押したあと
  document.title = "初期のタイトル"
  head: <meta charset="utf-8"><title>初期のタイトル</title>

import type { ReactNode } from 'react';

// 共通のレイアウトと、その中のページの両方が title と description を描く
function Layout({ children }: { children: ReactNode }) {
  return (
    <div className="layout">
      <title>猫の手ブログ</title>
      <meta name="description" content="サイト共通の説明です。" />
      {children}
    </div>
  );
}

function CatPage() {
  return (
    <article>
      <title>猫の記事 | 猫の手ブログ</title>
      <meta name="description" content="猫についての記事です。" />
      <h1>猫の記事</h1>
    </article>
  );
}

export function TwoTitles() {
  return (
    <Layout>
      <CatPage />
    </Layout>
  );
}

--- 最初の描画
  document.title = "猫の記事 | 猫の手ブログ"
  head: <meta charset="utf-8"><title>猫の記事 | 猫の手ブログ</title><title>猫の手ブログ</title><title>初期のタイトル</title><meta name="description" content="サイト共通の説明です。"><meta name="description" content="猫についての記事です。">

import { useState } from 'react';

// 🔴 {} で数を混ぜると、children が文字列1つにならない
export function TitleWithNumber() {
  const [page, setPage] = useState(1);
  return (
    <>
      <title>検索結果 {page}ページ目</title>
      <button onClick={() => setPage(page + 1)}>次へ</button>
    </>
  );
}

--- 最初の描画
  document.title = ""
  head: <meta charset="utf-8"><title></title><title>初期のタイトル</title>
  body: <button>次へ</button>
--- 「次へ」を押したあと
  document.title = ""
  head: <meta charset="utf-8"><title></title><title>初期のタイトル</title>
  body: <button>次へ</button>

[console.error] React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 3 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported.

// テンプレートリテラルで、文字列1つにしてから渡す
export function TitleWithTemplate() {
  const [page, setPage] = useState(1);
  return (
    <>
      <title>{`検索結果 ${page}ページ目`}</title>
      <button onClick={() => setPage(page + 1)}>次へ</button>
    </>
  );
}

--- 最初の描画
  document.title = "検索結果 1ページ目"
--- 「次へ」を押したあと
  document.title = "検索結果 2ページ目"

// head に移されないもの：svg の中の title と、itemProp を付けた meta
export function Exceptions() {
  return (
    <section itemScope itemType="https://schema.org/Product">
      <svg width="24" height="24" role="img">
        <title>肉球のアイコン</title>
        <circle cx="12" cy="12" r="10" />
      </svg>
      <meta itemProp="name" content="猫じゃらし" />
      <h2>猫じゃらし</h2>
    </section>
  );
}

--- 最初の描画
  document.title = "初期のタイトル"
  head: <meta charset="utf-8"><title>初期のタイトル</title>
  body: <section itemscope="" itemtype="https://schema.org/Product"><svg width="24" height="24" role="img"><title>肉球のアイコン</title><circle cx="12" cy="12" r="10"></circle></svg><meta itemprop="name" content="猫じゃらし"><h2>猫じゃらし</h2></section>

import { CatPage } from './Pages';

// サーバーで描く文書全体。head には charset だけを書いておく
export function Document() {
  return (
    <html lang="ja">
      <head>
        <meta charSet="utf-8" />
      </head>
      <body>
        <CatPage />
      </body>
    </html>
  );
}

--- 1. html から描いた文書全体を renderToReadableStream で
<!DOCTYPE html><html lang="ja"><head><meta charSet="utf-8"/><title>猫の記事 | 猫の手ブログ</title><meta name="description" content="猫についての記事です。"/><link rel="canonical" href="https://example.com/cats"/></head><body><article><h1>猫の記事</h1></article></body></html>

--- 2. ページの部品だけを renderToString で
<title>猫の記事 | 猫の手ブログ</title><meta name="description" content="猫についての記事です。"/><link rel="canonical" href="https://example.com/cats"/><article><h1>猫の記事</h1></article>