Skip to content

Adding SSR rendering Edge Case documentation for <link>, <title>, and <meta>. #8562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VedantPatel04 wants to merge 1 commit into
base: main
Choose a base branch
from
+19 −1
Open

Adding SSR rendering Edge Case documentation for <link>, <title>, and <meta>. #8562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/content/reference/react-dom/components/link.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,12 @@ There are a few exceptions to this:
* 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.
* 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.

<Note>

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.

</Note>

#### Special behavior for stylesheets {/*special-behavior-for-stylesheets*/}

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:
Expand Down
6 changes: 6 additions & 0 deletions src/content/reference/react-dom/components/meta.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@ React will always place the DOM element corresponding to the `<meta>` component

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.

<Note>

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.

</Note>

---

## Usage {/*usage*/}
Expand Down
8 changes: 7 additions & 1 deletion src/content/reference/react-dom/components/title.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,18 @@ To specify the title of the document, render the [built-in browser `<title>` 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.
Expand Down
Loading