reactjs / reactjs/react.dev

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

Offen Anfängerfreundlich
#8,559 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

type: documentation
Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

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
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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

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.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Ruhig
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
72/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.