[Suggestion]: Clarify SSR metadata hoisting behavior for fragment-based rendering
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Accessibilité débutants
- 72/100
- Type d'issue
- Documentation
- Clarté
- Clairement spécifiée
- Activité
- Calme
- Stack technique
- javascript, react
- Domaine
- documentation
Piste de recherche
Commencez par les pages de documentation de React 19 consacrées à title, meta et link, en particulier la section "Rendering Metadata". Examinez le comportement SSR décrit dans l’issue et comparez-le avec l’exemple lié qui utilise renderToString ou renderToPipeableStream. Le travail est considéré comme terminé lorsque la documentation explique clairement le placement SSR basé sur les fragments par rapport au rendu de documents complets, ainsi que la nécessité d’une intégration côté serveur lorsque cela est approprié.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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
This is browser render
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.
- Langage dominant
- JavaScript
- Étoiles
- 11.8k
- Forks
- 7.9k
- Merge moyen
- 16 h 6 min
- PR mergées (30 j)
- 7
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de reactjs/react.dev
-
type: documentation
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
-
Difficulté 1/5 Moins d'une heure Accessibilité débutants 82/100
-
bug: unconfirmed
Difficulté 2/5 1-3 heures Accessibilité débutants 74/100
-
type: typos
Difficulté 1/5 Moins d'une heure Accessibilité débutants 90/100
-
bug: unconfirmed
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
Toutes les issues de reactjs/react.dev
Issues similaires
-
Difficulté 2/5 1-3 heures Accessibilité débutants 65/100
-
Theme loads third-party resources on every page (jsdelivr web font, cdnjs Font Awesome) – GDPR Ouverte
Difficulté 2/5 1-3 heures Accessibilité débutants 75/100
docToolchain/docToolchain#1705 ·
-
Timezone select lists one option per character; duplicate "Failed" reason; shared tracker popover id Ouvertebug
Difficulté 2/5 1-3 heures Accessibilité débutants 75/100
nightscout/nocturne#1414 ·
-
bug v2
Difficulté 2/5 1-3 heures Accessibilité débutants 75/100
modelcontextprotocol/inspector#2458 · 1 commentaire ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
Difficulté 2/5 1-3 heures Accessibilité débutants 70/100
carbon-design-system/ibm-products#9907 ·