Skip to content

Commit 873bc21

Browse files
Vedant PatelVedant Patel
authored andcommitted
This clears up the server side rendering case for title, link and meta tags by adding a note under the "Special rendering behavior" sections for the respective md files of each tag.
1 parent 7b6c3ce commit 873bc21

3 files changed

Lines changed: 19 additions & 1 deletion

File tree

src/content/reference/react-dom/components/link.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,12 @@ There are a few exceptions to this:
8080
* If the `<link>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t apply to the document but instead represents metadata about a specific part of the page.
8181
* If the `<link>` has an `onLoad` or `onError` prop, because in that case you are managing the loading of the linked resource manually within your React component.
8282

83+
<Note>
84+
85+
When rendering only part of a document on the server, React cannot insert `<link>` into a `<head>` supplied by a separate HTML template. It emits `<link>` with the rendered output instead, and hydration does not move it into that `<head>`. To include `<link>` in the initial document `<head>`, render the entire document with React or add it to the server template.
86+
87+
</Note>
88+
8389
#### Special behavior for stylesheets {/*special-behavior-for-stylesheets*/}
8490

8591
In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways:

src/content/reference/react-dom/components/meta.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ React will always place the DOM element corresponding to the `<meta>` component
4646

4747
There is one exception to this: if `<meta>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page.
4848

49+
<Note>
50+
51+
When rendering only part of a document on the server, React cannot insert `<meta>` into a `<head>` supplied by a separate HTML template. It emits `<meta>` with the rendered output instead, and hydration does not move it into that `<head>`. To include `<meta>` in the initial document `<head>`, render the entire document with React or add it to the server template.
52+
53+
</Note>
54+
4955
---
5056

5157
## Usage {/*usage*/}

src/content/reference/react-dom/components/title.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,18 @@ To specify the title of the document, render the [built-in browser `<title>` com
3636

3737
#### Special rendering behavior {/*special-rendering-behavior*/}
3838

39-
React will always place the DOM element corresponding to the `<title>` component within the documents `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet its convenient and keeps things composable if a component representing a specific page can render its `<title>` itself.
39+
React will always place the DOM element corresponding to the `<title>` component within the document's `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it's convenient and keeps things composable if a component representing a specific page can render its `<title>` itself.
4040

4141
There are two exception to this:
4242
* If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
4343
* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page.
4444

45+
<Note>
46+
47+
When rendering only part of a document on the server, React cannot insert `<title>` into a `<head>` supplied by a separate HTML template. It emits `<title>` with the rendered output instead, and hydration does not move it into that `<head>`. To include `<title>` in the initial document `<head>`, render the entire document with React or add it to the server template.
48+
49+
</Note>
50+
4551
<Pitfall>
4652

4753
Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.

0 commit comments

Comments
 (0)