Metadados do Documento - Renderize tags de título, meta e link em qualquer lugar na árvore de componentes

Q: Como o React 19 lida com tags de título, meta e link renderizadas dentro de componentes?

O React reconhece esses elementos e os eleva para o do documento automaticamente Isso funciona em todos os modos de renderização: SPAs apenas do lado do cliente, SSR com streaming e Server Components Durante a navegação do lado do cliente, o React atualiza o adicionando, removendo ou atualizando elementos elevados

Q: O que acontece se vários componentes renderizarem uma tag de título?

Apenas o último renderizado é aplicado -- o React os deduplica Se dois componentes irmãos renderizarem , o resultado depende da ordem de renderização Defina em apenas um componente por rota, tipicamente o componente no nível da página

Q: Como as tags meta são deduplicadas?

Tags são deduplicadas pelo atributo name ou property Duas tags de componentes diferentes resultam em apenas a mais recente Outros tipos de (preload, icon, canonical) são elevados, mas não deduplicados por padrão

Q: O que o atributo precedence faz nas tags de link de stylesheet?

precedence controla a ordem de inserção de folhas de estilo no Folhas de estilo com o mesmo valor precedence são agrupadas O React também deduplica links de folhas de estilo por href e suspende a renderização até que a folha de estilo carregue

Q: É possível atualizar dinamicamente o título com dados ao vivo (por exemplo, contagem de não lidas)?

O título é atualizado reativamente à medida que unreadCount muda.

Q: Componentes aninhados de layouts e páginas podem contribuir com metadados?

Sim. Um layout pode definir metadados base (, ) e páginas filhas adicionam tags específicas da página As tags são mescladas -- o específico da página substitui o do layout se ambos renderizarem um A deduplicação de por name/property garante que não haja duplicatas

Q: Armadilha: Devo usar metadados inline do React 19 ou a exportação de metadados do Next.js?

O Next.js tem sua própria exportação metadata e generateMetadata que podem conflitar com tags inline Usar ambos pode causar tags duplicadas em Escolha uma abordagem por projeto; para aplicativos Next.js, prefira a API metadata do framework

Q: Armadilha: O React 19 eleva tags script para o head?

Não. O React 19 não eleva tags para Use preinit de react-dom para scripts, ou coloque tags script em seu template HTML Isso se aplica apenas aos elementos , e

Q: O que acontece se uma tag de link de stylesheet não tiver o atributo precedence?

Sem precedence, a folha de estilo é tratada como um link regular e não é deduplicada ou ordenada pelo React O React também não suspenderá a renderização para ela, potencialmente causando um flash de conteúdo não estilizado Sempre adicione precedence às folhas de estilo que você deseja que o React gerencie

Q: Como o atributo precedence é tipado em TypeScript?

O atributo precedence em é uma extensão específica do React tipada como string | undefined , e usam seus tipos de atributo HTML padrão de React.JSX.IntrinsicElements Nenhuma importação especial é necessária -- estes são elementos JSX padrão

Receita

function BlogPost({ post }: { post: { title: string; description: string; author: string } }) {
  return (
    <article>
      {/* Estes são elevados para <head> automaticamente */}
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <meta name="author" content={post.author} />
      <link rel="canonical" href={`https://example.com/blog/${post.title}`} />
 
      <h1>{post.title}</h1>
      <p>{post.description}</p>
    </article>
  );
}

Quando usar isso: Use metadados integrados sempre que um componente precisar definir o título da página, a descrição ou outras tags de head. Isso elimina a necessidade de react-helmet ou efeitos manuais de document.title.

Exemplo de Trabalho

// Um aplicativo multipágina onde cada rota define seus próprios metadados
function ProductPage({ product }: {
  product: {
    name: string;
    description: string;
    price: number;
    image: string;
    category: string;
  };
}) {
  return (
    <main>
      {/* Título da página */}
      <title>{product.name} | Minha Loja</title>
 
      {/* Tags meta SEO */}
      <meta name="description" content={product.description} />
      <meta name="keywords" content={`${product.category}, comprar, loja`} />
 
      {/* Tags Open Graph */}
      <meta property="og:title" content={product.name} />
      <meta property="og:description" content={product.description} />
      <meta property="og:image" content={product.image} />
      <meta property="og:type" content="product" />
 
      {/* Twitter card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={product.name} />
      <meta name="twitter:image" content={product.image} />
 
      {/* Pré-carregar a imagem do produto */}
      <link rel="preload" href={product.image} as="image" />
 
      {/* Stylesheet para esta página */}
      <link rel="stylesheet" href="/styles/product.css" precedence="default" />
 
      {/* Conteúdo da página */}
      <div className="max-w-4xl mx-auto p-6">
        <img src={product.image} alt={product.name} />
        <h1 className="text-3xl font-bold">{product.name}</h1>
        <p className="text-xl">${product.price.toFixed(2)}</p>
        <p>{product.description}</p>
      </div>
    </main>
  );
}
 
function SettingsPage() {
  return (
    <div>
      <title>Configurações | Minha Loja</title>
      <meta name="robots" content="noindex" />
      <h1>Configurações da Conta</h1>
      {/* ... */}
    </div>
  );
}
 
export { ProductPage, SettingsPage };

O que isso demonstra:

<title> renderizado inline, automaticamente elevado para <head>
Tags meta SEO (descrição, palavras-chave) definidas por página
Tags Open Graph e Twitter Card para compartilhamento social
<link rel="preload"> para otimização de desempenho
<link rel="stylesheet"> com precedence para ordenação de CSS
Páginas diferentes definindo metadados completamente diferentes

Análise Detalhada

Como Funciona

O React 19 reconhece elementos <title>, <meta> e <link> quando renderizados dentro de um componente e os eleva para o <head> do documento.
Isso funciona em todos os modos de renderização: SPAs apenas do lado do cliente, SSR com streaming e Server Components.
Durante o SSR, as tags de metadados são incluídas no <head> inicial do HTML. Durante a navegação do lado do cliente, o React atualiza o <head> adicionando, removendo ou atualizando os elementos elevados.
Tags <title> são deduplicadas -- apenas o último <title> renderizado vence se vários componentes renderizarem um.
Tags <meta> são deduplicadas pelo atributo name ou property. Duas tags <meta name="description"> de componentes diferentes resultarão em apenas a mais recente.
Tags <link rel="stylesheet"> suportam um atributo precedence que controla a ordem de inserção. Folhas de estilo com a mesma precedence são agrupadas. O React também deduplica links de folhas de estilo por href.
Outros tipos de <link> (preload, icon, canonical, etc.) são elevados, mas não deduplicados por padrão.

Variações

Título dinâmico com dados ao vivo:

function ChatRoom({ roomName, unreadCount }: { roomName: string; unreadCount: number }) {
  const titlePrefix = unreadCount > 0 ? `(${unreadCount}) ` : "";
  return (
    <div>
      <title>{titlePrefix}{roomName} | Chat</title>
      <h1>{roomName}</h1>
      {/* UI do chat */}
    </div>
  );
}

Componentes aninhados adicionando metadados:

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {/* Metadados base */}
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
        {children}
      </body>
    </html>
  );
}
 
function AboutPage() {
  return (
    <Layout>
      {/* Metadados específicos da página se misturam com os metadados do layout */}
      <title>Sobre Nós</title>
      <meta name="description" content="Saiba mais sobre nossa empresa" />
      <h1>Sobre Nós</h1>
    </Layout>
  );
}

Ordenação de precedência de folhas de estilo:

function App() {
  return (
    <>
      {/* "default" precedence carrega primeiro */}
      <link rel="stylesheet" href="/base.css" precedence="default" />
      {/* "high" precedence carrega após "default" */}
      <link rel="stylesheet" href="/theme.css" precedence="high" />
    </>
  );
}
 
function Widget() {
  return (
    <>
      {/* Mesma precedência agrupa junto com outras folhas de estilo "default" */}
      <link rel="stylesheet" href="/widget.css" precedence="default" />
      <div>Conteúdo do Widget</div>
    </>
  );
}

Notas de TypeScript

Os elementos JSX <title>, <meta> e <link> usam seus tipos de atributo HTML padrão de React.JSX.IntrinsicElements.
O atributo precedence em <link> é uma extensão específica do React tipada como string | undefined.
Nenhuma importação especial é necessária -- estes são elementos JSX padrão.

Armadilhas

Múltiplas tags <title> -- Apenas o último <title> renderizado é aplicado. Se dois componentes irmãos renderizarem <title>, o resultado depende da ordem de renderização. Correção: Defina <title> em apenas um componente por rota, tipicamente o componente no nível da página.
APIs de metadados do framework podem conflitar -- Next.js tem sua própria exportação metadata e generateMetadata. Usar ambos e tags <title> inline pode causar duplicatas. Correção: Escolha uma abordagem por projeto. Para aplicativos Next.js, prefira a API metadata do framework.
Metadados fora de <head> no HTML SSR -- O React eleva tags durante a renderização, mas se você inspecionar a resposta HTML bruta, elas aparecem em <head>. Se ocorrerem incompatibilidades de hidratação, verifique as diferenças entre servidor/cliente. Correção: Garanta que os valores dos metadados sejam determinísticos (sem Date.now() ou Math.random()).
<link rel="stylesheet"> sem precedence -- Se você omitir precedence, o link da folha de estilo é tratado como um link regular e não é deduplicado ou ordenado pelo React. Correção: Sempre adicione precedence aos links de folha de estilo para ordenação gerenciada pelo React.
Sem suporte para elevação de <script> -- O React 19 não eleva tags <script> para <head>. Correção: Use preinit de react-dom para scripts, ou coloque tags script em seu template HTML.

Alternativas

Abordagem	Quando escolher
Metadados integrados (React 19)	Escolha padrão para novos projetos React 19
Exportação `metadata` do Next.js	Projetos Next.js App Router com metadados estáticos ou dinâmicos
`react-helmet` / `react-helmet-async`	Projetos React 18 ou mais antigos
`document.title` manual em useEffect	Hack rápido para alterações de título apenas do lado do cliente
`<head>` HTML no template	Metadados estáticos que nunca mudam

FAQs

Como o React 19 lida com tags de título, meta e link renderizadas dentro de componentes?

O React reconhece esses elementos e os eleva para o <head> do documento automaticamente
Isso funciona em todos os modos de renderização: SPAs apenas do lado do cliente, SSR com streaming e Server Components
Durante a navegação do lado do cliente, o React atualiza o <head> adicionando, removendo ou atualizando elementos elevados

O que acontece se vários componentes renderizarem uma tag de título?

Apenas o último <title> renderizado é aplicado -- o React os deduplica
Se dois componentes irmãos renderizarem <title>, o resultado depende da ordem de renderização
Defina <title> em apenas um componente por rota, tipicamente o componente no nível da página

Como as tags meta são deduplicadas?

Tags <meta> são deduplicadas pelo atributo name ou property
Duas tags <meta name="description"> de componentes diferentes resultam em apenas a mais recente
Outros tipos de <link> (preload, icon, canonical) são elevados, mas não deduplicados por padrão

O que o atributo precedence faz nas tags de link de stylesheet?

precedence controla a ordem de inserção de folhas de estilo no <head>
Folhas de estilo com o mesmo valor precedence são agrupadas
O React também deduplica links de folhas de estilo por href e suspende a renderização até que a folha de estilo carregue

Como definir tags Open Graph e Twitter Card com metadados do React 19?

function Page({ title, description, image }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      {/* conteúdo da página */}
    </>
  );
}

É possível atualizar dinamicamente o título com dados ao vivo (por exemplo, contagem de não lidas)?

function ChatRoom({ roomName, unreadCount }) {
  const prefix = unreadCount > 0 ? `(${unreadCount}) ` : "";
  return (
    <>
      <title>{prefix}{roomName} | Chat</title>
      {/* UI do chat */}
    </>
  );
}

O título é atualizado reativamente à medida que unreadCount muda.

Componentes aninhados de layouts e páginas podem contribuir com metadados?

Sim. Um layout pode definir metadados base (<meta charSet>, <link rel="icon">) e páginas filhas adicionam tags específicas da página
As tags são mescladas -- o <title> específico da página substitui o do layout se ambos renderizarem um
A deduplicação de <meta> por name/property garante que não haja duplicatas

Armadilha: Devo usar metadados inline do React 19 ou a exportação de metadados do Next.js?

O Next.js tem sua própria exportação metadata e generateMetadata que podem conflitar com tags inline
Usar ambos pode causar tags duplicadas em <head>
Escolha uma abordagem por projeto; para aplicativos Next.js, prefira a API metadata do framework

Armadilha: O React 19 eleva tags script para o head?

Não. O React 19 não eleva tags <script> para <head>
Use preinit de react-dom para scripts, ou coloque tags script em seu template HTML
Isso se aplica apenas aos elementos <title>, <meta> e <link>

O que acontece se uma tag de link de stylesheet não tiver o atributo precedence?

Sem precedence, a folha de estilo é tratada como um link regular e não é deduplicada ou ordenada pelo React
O React também não suspenderá a renderização para ela, potencialmente causando um flash de conteúdo não estilizado
Sempre adicione precedence às folhas de estilo que você deseja que o React gerencie

Como o atributo precedence é tipado em TypeScript?

O atributo precedence em <link> é uma extensão específica do React tipada como string | undefined
<title>, <meta> e <link> usam seus tipos de atributo HTML padrão de React.JSX.IntrinsicElements
Nenhuma importação especial é necessária -- estes são elementos JSX padrão

Como garantir que os valores dos metadados não causem incompatibilidades de hidratação?

Garanta que os valores dos metadados sejam determinísticos -- evite Date.now(), Math.random() ou outros valores não determinísticos
Servidor e cliente devem produzir o mesmo conteúdo de metadados durante a hidratação
Use valores estáveis de props, params ou consultas de banco de dados

Relacionados

Carregamento de Assets -- Pré-carregando recursos com preload e preinit
Server Components -- Metadados em páginas renderizadas pelo servidor
Visão Geral -- Lista completa de recursos do React 19

Receita

function BlogPost({ post }: { post: { title: string; description: string; author: string } }) {
  return (
    <article>
      {/* Estes são elevados para <head> automaticamente */}
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <meta name="author" content={post.author} />
      <link rel="canonical" href={`https://example.com/blog/${post.title}`} />
 
      <h1>{post.title}</h1>
      <p>{post.description}</p>
    </article>
  );
}

Exemplo de Trabalho

// Um aplicativo multipágina onde cada rota define seus próprios metadados
function ProductPage({ product }: {
  product: {
    name: string;
    description: string;
    price: number;
    image: string;
    category: string;
  };
}) {
  return (
    <main>
      {/* Título da página */}
      <title>{product.name} | Minha Loja</title>
 
      {/* Tags meta SEO */}
      <meta name="description" content={product.description} />
      <meta name="keywords" content={`${product.category}, comprar, loja`} />
 
      {/* Tags Open Graph */}
      <meta property="og:title" content={product.name} />
      <meta property="og:description" content={product.description} />
      <meta property="og:image" content={product.image} />
      <meta property="og:type" content="product" />
 
      {/* Twitter card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={product.name} />
      <meta name="twitter:image" content={product.image} />
 
      {/* Pré-carregar a imagem do produto */}
      <link rel="preload" href={product.image} as="image" />
 
      {/* Stylesheet para esta página */}
      <link rel="stylesheet" href="/styles/product.css" precedence="default" />
 
      {/* Conteúdo da página */}
      <div className="max-w-4xl mx-auto p-6">
        <img src={product.image} alt={product.name} />
        <h1 className="text-3xl font-bold">{product.name}</h1>
        <p className="text-xl">${product.price.toFixed(2)}</p>
        <p>{product.description}</p>
      </div>
    </main>
  );
}
 
function SettingsPage() {
  return (
    <div>
      <title>Configurações | Minha Loja</title>
      <meta name="robots" content="noindex" />
      <h1>Configurações da Conta</h1>
      {/* ... */}
    </div>
  );
}
 
export { ProductPage, SettingsPage };

O que isso demonstra:

<title> renderizado inline, automaticamente elevado para <head>
Tags meta SEO (descrição, palavras-chave) definidas por página
Tags Open Graph e Twitter Card para compartilhamento social
<link rel="preload"> para otimização de desempenho
<link rel="stylesheet"> com precedence para ordenação de CSS
Páginas diferentes definindo metadados completamente diferentes

Análise Detalhada

Como Funciona

O React 19 reconhece elementos <title>, <meta> e <link> quando renderizados dentro de um componente e os eleva para o <head> do documento.
Isso funciona em todos os modos de renderização: SPAs apenas do lado do cliente, SSR com streaming e Server Components.
Durante o SSR, as tags de metadados são incluídas no <head> inicial do HTML. Durante a navegação do lado do cliente, o React atualiza o <head> adicionando, removendo ou atualizando os elementos elevados.
Tags <title> são deduplicadas -- apenas o último <title> renderizado vence se vários componentes renderizarem um.
Tags <meta> são deduplicadas pelo atributo name ou property. Duas tags <meta name="description"> de componentes diferentes resultarão em apenas a mais recente.
Tags <link rel="stylesheet"> suportam um atributo precedence que controla a ordem de inserção. Folhas de estilo com a mesma precedence são agrupadas. O React também deduplica links de folhas de estilo por href.
Outros tipos de <link> (preload, icon, canonical, etc.) são elevados, mas não deduplicados por padrão.

Variações

Título dinâmico com dados ao vivo:

function ChatRoom({ roomName, unreadCount }: { roomName: string; unreadCount: number }) {
  const titlePrefix = unreadCount > 0 ? `(${unreadCount}) ` : "";
  return (
    <div>
      <title>{titlePrefix}{roomName} | Chat</title>
      <h1>{roomName}</h1>
      {/* UI do chat */}
    </div>
  );
}

Componentes aninhados adicionando metadados:

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {/* Metadados base */}
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
        {children}
      </body>
    </html>
  );
}
 
function AboutPage() {
  return (
    <Layout>
      {/* Metadados específicos da página se misturam com os metadados do layout */}
      <title>Sobre Nós</title>
      <meta name="description" content="Saiba mais sobre nossa empresa" />
      <h1>Sobre Nós</h1>
    </Layout>
  );
}

Ordenação de precedência de folhas de estilo:

function App() {
  return (
    <>
      {/* "default" precedence carrega primeiro */}
      <link rel="stylesheet" href="/base.css" precedence="default" />
      {/* "high" precedence carrega após "default" */}
      <link rel="stylesheet" href="/theme.css" precedence="high" />
    </>
  );
}
 
function Widget() {
  return (
    <>
      {/* Mesma precedência agrupa junto com outras folhas de estilo "default" */}
      <link rel="stylesheet" href="/widget.css" precedence="default" />
      <div>Conteúdo do Widget</div>
    </>
  );
}

Notas de TypeScript

Os elementos JSX <title>, <meta> e <link> usam seus tipos de atributo HTML padrão de React.JSX.IntrinsicElements.
O atributo precedence em <link> é uma extensão específica do React tipada como string | undefined.
Nenhuma importação especial é necessária -- estes são elementos JSX padrão.

Armadilhas

Múltiplas tags <title> -- Apenas o último <title> renderizado é aplicado. Se dois componentes irmãos renderizarem <title>, o resultado depende da ordem de renderização. Correção: Defina <title> em apenas um componente por rota, tipicamente o componente no nível da página.
APIs de metadados do framework podem conflitar -- Next.js tem sua própria exportação metadata e generateMetadata. Usar ambos e tags <title> inline pode causar duplicatas. Correção: Escolha uma abordagem por projeto. Para aplicativos Next.js, prefira a API metadata do framework.
Metadados fora de <head> no HTML SSR -- O React eleva tags durante a renderização, mas se você inspecionar a resposta HTML bruta, elas aparecem em <head>. Se ocorrerem incompatibilidades de hidratação, verifique as diferenças entre servidor/cliente. Correção: Garanta que os valores dos metadados sejam determinísticos (sem Date.now() ou Math.random()).
<link rel="stylesheet"> sem precedence -- Se você omitir precedence, o link da folha de estilo é tratado como um link regular e não é deduplicado ou ordenado pelo React. Correção: Sempre adicione precedence aos links de folha de estilo para ordenação gerenciada pelo React.
Sem suporte para elevação de <script> -- O React 19 não eleva tags <script> para <head>. Correção: Use preinit de react-dom para scripts, ou coloque tags script em seu template HTML.

Alternativas

Abordagem	Quando escolher
Metadados integrados (React 19)	Escolha padrão para novos projetos React 19
Exportação `metadata` do Next.js	Projetos Next.js App Router com metadados estáticos ou dinâmicos
`react-helmet` / `react-helmet-async`	Projetos React 18 ou mais antigos
`document.title` manual em useEffect	Hack rápido para alterações de título apenas do lado do cliente
`<head>` HTML no template	Metadados estáticos que nunca mudam

FAQs

Como o React 19 lida com tags de título, meta e link renderizadas dentro de componentes?

O React reconhece esses elementos e os eleva para o <head> do documento automaticamente
Isso funciona em todos os modos de renderização: SPAs apenas do lado do cliente, SSR com streaming e Server Components
Durante a navegação do lado do cliente, o React atualiza o <head> adicionando, removendo ou atualizando elementos elevados

O que acontece se vários componentes renderizarem uma tag de título?

Apenas o último <title> renderizado é aplicado -- o React os deduplica
Se dois componentes irmãos renderizarem <title>, o resultado depende da ordem de renderização
Defina <title> em apenas um componente por rota, tipicamente o componente no nível da página

Como as tags meta são deduplicadas?

Tags <meta> são deduplicadas pelo atributo name ou property
Duas tags <meta name="description"> de componentes diferentes resultam em apenas a mais recente
Outros tipos de <link> (preload, icon, canonical) são elevados, mas não deduplicados por padrão

O que o atributo precedence faz nas tags de link de stylesheet?

precedence controla a ordem de inserção de folhas de estilo no <head>
Folhas de estilo com o mesmo valor precedence são agrupadas
O React também deduplica links de folhas de estilo por href e suspende a renderização até que a folha de estilo carregue

Como definir tags Open Graph e Twitter Card com metadados do React 19?

function Page({ title, description, image }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      {/* conteúdo da página */}
    </>
  );
}

É possível atualizar dinamicamente o título com dados ao vivo (por exemplo, contagem de não lidas)?

function ChatRoom({ roomName, unreadCount }) {
  const prefix = unreadCount > 0 ? `(${unreadCount}) ` : "";
  return (
    <>
      <title>{prefix}{roomName} | Chat</title>
      {/* UI do chat */}
    </>
  );
}

O título é atualizado reativamente à medida que unreadCount muda.

Componentes aninhados de layouts e páginas podem contribuir com metadados?

Sim. Um layout pode definir metadados base (<meta charSet>, <link rel="icon">) e páginas filhas adicionam tags específicas da página
As tags são mescladas -- o <title> específico da página substitui o do layout se ambos renderizarem um
A deduplicação de <meta> por name/property garante que não haja duplicatas

Armadilha: Devo usar metadados inline do React 19 ou a exportação de metadados do Next.js?

O Next.js tem sua própria exportação metadata e generateMetadata que podem conflitar com tags inline
Usar ambos pode causar tags duplicadas em <head>
Escolha uma abordagem por projeto; para aplicativos Next.js, prefira a API metadata do framework

Armadilha: O React 19 eleva tags script para o head?

Não. O React 19 não eleva tags <script> para <head>
Use preinit de react-dom para scripts, ou coloque tags script em seu template HTML
Isso se aplica apenas aos elementos <title>, <meta> e <link>

O que acontece se uma tag de link de stylesheet não tiver o atributo precedence?

Sem precedence, a folha de estilo é tratada como um link regular e não é deduplicada ou ordenada pelo React
O React também não suspenderá a renderização para ela, potencialmente causando um flash de conteúdo não estilizado
Sempre adicione precedence às folhas de estilo que você deseja que o React gerencie

Como o atributo precedence é tipado em TypeScript?

O atributo precedence em <link> é uma extensão específica do React tipada como string | undefined
<title>, <meta> e <link> usam seus tipos de atributo HTML padrão de React.JSX.IntrinsicElements
Nenhuma importação especial é necessária -- estes são elementos JSX padrão

Como garantir que os valores dos metadados não causem incompatibilidades de hidratação?

Garanta que os valores dos metadados sejam determinísticos -- evite Date.now(), Math.random() ou outros valores não determinísticos
Servidor e cliente devem produzir o mesmo conteúdo de metadados durante a hidratação
Use valores estáveis de props, params ou consultas de banco de dados

Relacionados

Carregamento de Assets -- Pré-carregando recursos com preload e preinit
Server Components -- Metadados em páginas renderizadas pelo servidor
Visão Geral -- Lista completa de recursos do React 19

Metadados do Documento - Renderize tags de título, meta e link em qualquer lugar na árvore de componentes

Buscar na documentação

Metadados do Documento - Renderize tags de título, meta e link em qualquer lugar na árvore de componentes