Document Metadata et feuilles de style natives — Lexique Dev

Définition

Depuis React 19 (5 décembre 2024), <title>, <meta> et <link> rendus n'importe où dans l'arbre sont hissés automatiquement dans le <head>. Les <link rel="stylesheet" precedence="..."> sont dédoublonnées, ordonnées par précédence et attendues avant l'affichage du composant qui en dépend ; les <script async> sont dédoublonnés. Cela réduit le besoin de react-helmet ou d'un système de styles maison en SSR/RSC.

Analogie

Un courrier interne : vous déposez la note dans n'importe quel service, elle finit épinglée sur le tableau d'affichage de l'entrée.

Exemple de code

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>                 {/* hissé dans <head> */}
      <meta name="author" content={post.author} />
      <link rel="stylesheet" href="/article.css" precedence="default" />
      <script async src="/embed.js" />          {/* dédoublonné */}
      <h1>{post.title}</h1>
    </article>
  );
}

Cas d'usage

SEO par page dans une app SSR/RSC, chargement de CSS par composant sans FOUC, scripts tiers embarqués une seule fois.

Anti-pattern

Rendre <link rel="stylesheet"> sans attribut precedence : React ne gère alors ni l'ordre ni la déduplication.

Termes liés

Sources

react.dev/blog/2024/12/05/react-19