[Suggestion]: Clarify SSR metadata hoisting behavior for fragment-based rendering
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Anfängerfreundlichkeit
- 72/100
- Issue-Typ
- Dokumentation
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- javascript, react
- Bereich
- documentation
Rechercherichtung
Beginne mit den React 19-Dokumentationsseiten zu title, meta und link, insbesondere mit dem Abschnitt "Rendering Metadata". Überprüfe das im Issue beschriebene SSR-Verhalten und vergleiche es mit dem verlinkten Beispiel, das renderToString oder renderToPipeableStream verwendet. Als erledigt gilt die Aufgabe, wenn die Dokumentation die SSR-Platzierung auf Fragmentbasis gegenüber dem Rendern vollständiger Dokumente und den Bedarf an serverseitiger Integration, sofern angemessen, klar erklärt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 16 Std. 6 Min.
- Gemergte PRs (30 T.)
- 7
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus reactjs/react.dev
-
type: documentation
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 82/100
-
bug: unconfirmed
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 74/100
-
type: typos
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 90/100
-
bug: unconfirmed
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
Alle Issues in reactjs/react.dev
Ähnliche Issues
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 76/100
avniproject/avni-client#2135 ·
-
automated broken-link
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 85/100
-
agent/security hive/hosted-available-lke648397-260827-5n31 security
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
-
enhancement
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
babalae/bettergi-scripts-list#3674 ·
-
A-Release-Notes C-Editing D-Modest S-Ready-For-Implementation
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
bevyengine/bevy-website#2595 ·