diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index 6d374807cae..6ae2b1ebdb2 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -80,6 +80,12 @@ There are a few exceptions to this: * If the `` 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. * If the `` has an `onLoad` or `onError` prop, because in that case you are managing the loading of the linked resource manually within your React component. + + +When rendering only part of a document on the server, React cannot insert `` into a `` supplied by a separate HTML template. It emits `` with the rendered output instead, and hydration does not move it into that ``. To include `` in the initial document ``, render the entire document with React or add it to the server template. + + + #### Special behavior for stylesheets {/*special-behavior-for-stylesheets*/} In addition, if the `` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways: diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md index 35a95c5aaf5..3c2db8dbd3c 100644 --- a/src/content/reference/react-dom/components/meta.md +++ b/src/content/reference/react-dom/components/meta.md @@ -46,6 +46,12 @@ React will always place the DOM element corresponding to the `` component There is one exception to this: if `` 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. + + +When rendering only part of a document on the server, React cannot insert `` into a `` supplied by a separate HTML template. It emits `` with the rendered output instead, and hydration does not move it into that ``. To include `` in the initial document ``, render the entire document with React or add it to the server template. + + + --- ## Usage {/*usage*/} diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md index 9e4d8e65ae4..275d7e86ed1 100644 --- a/src/content/reference/react-dom/components/title.md +++ b/src/content/reference/react-dom/components/title.md @@ -36,12 +36,18 @@ To specify the title of the document, render the [built-in browser `` com #### Special rendering behavior {/*special-rendering-behavior*/} -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. +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. There are two exception to this: * 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). * 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. +<Note> + +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. + +</Note> + <Pitfall> 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.