[Suggestion]: Clarify SSR metadata hoisting behavior for fragment-based rendering

Aberta Para iniciantes
#8,559 3 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
72/100
Tipo de issue
Documentação
Clareza
Claramente especificada
Status de atividade
Pouca atividade
Stack de tecnologia
javascript, react
Domínio
documentation

Direção de pesquisa

Comece pelas páginas da documentação do React 19 para title, meta e link, especialmente a seção "Rendering Metadata". Revise o comportamento de SSR descrito na issue e compare-o com o exemplo vinculado que usa renderToString ou renderToPipeableStream. Considera-se concluído quando a documentação explicar claramente o posicionamento de SSR baseado em fragmentos em comparação com a renderização de documentos completos e a necessidade de integração no lado do servidor quando apropriado.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

type: documentation
Summary

React 19's documentation for tags title, meta and link states that they are automatically hoisted to the document </head/>. However, there is a critical nuance regarding Server-Side Rendering (SSR) that should be explicitly documented.

When React is used to render only a fragment of a page (e.g., mounted inside </div id="root"/> rather than controlling the full HTML document), metadata tags are not hoisted to the actual HTML during SSR. Instead, they appear at the top of React's rendered tree (which is inside the </body/> in the initial HTML response).

Page

https://react.dev/reference/react-dom/components/title

Details

You can watch it at any basic SSR template, I also created an example
If you run it, you will see, that <title> and will not be hoisted to the actual HTML .

This is server html response
Image

This is browser render
Image

I propose adding a note in the React 19 documentation under the "Rendering Metadata" section that clarifies:

Important: React 19's automatic hoisting works at the React tree level, not the HTML document level. During SSR with renderToString renderToPipeableStream and others, metadata tags are placed at the top of React's rendered output. If React controls the entire document, this means </head/>. If React renders only a fragment (e.g., inside a </div id="root"/>), the tags will be in this fragment and will no be moved to </head/>. For SEO-critical metadata that must appear in the initial HTML </head/>, server-side integration (e.g., rendering these tags in your backend framework's layout) is still required in fragment-based setups.

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
16h 6min
PRs com merge (30d)
7

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de reactjs/react.dev

Todas as issues de reactjs/react.dev

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.