hydrate¶

hydrate позволяет отображать компоненты React внутри узла DOM браузера, HTML-содержимое которого было предварительно сгенерировано react-dom/server в React 17 и ниже.

1

hydrate(reactNode, domNode, callback?)

Описание¶

hydrate(reactNode, domNode, callback?)¶

Вызывает hydrate в React 17 и ниже для "прикрепления" React к существующему HTML, который уже был отрисован React в серверной среде.

1
2
3

import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);

React присоединится к HTML, существующему внутри domNode, и возьмет на себя управление DOM внутри него. Приложение, полностью построенное на React, обычно имеет только один вызов hydrate со своим корневым компонентом.

Параметры

• reactNode: "Узел React", используемый для рендеринга существующего HTML. Обычно это кусок JSX типа <App />, который был отрисован с помощью метода ReactDOM Server, такого как renderToString(<App />) в React 17.
• domNode: DOM-элемент, который был отображен как корневой элемент на сервере.
• опционально: callback: Функция. Если она передана, React вызовет ее после того, как ваш компонент будет гидратирован.

Возвращает

hydrate возвращает null.

Ограничения

• hydrate ожидает, что отрисованное содержимое будет идентично содержимому, отрисованному на сервере. React может исправлять различия в текстовом содержимом, но вы должны рассматривать несоответствия как ошибки и исправлять их.
• В режиме разработки React предупреждает о несоответствиях во время гидратации. Нет никаких гарантий, что различия между атрибутами будут исправлены в случае несовпадений. Это важно по соображениям производительности, поскольку в большинстве приложений несоответствия встречаются редко, и поэтому валидация всей разметки была бы непомерно дорогой.
• Скорее всего, в вашем приложении будет только один вызов hydrate. Если вы используете фреймворк, он может сделать этот вызов за вас.
• Если ваше приложение клиентское, без уже отрендеренного HTML, использование hydrate() не поддерживается. Вместо этого используйте render() (для React 17 и ниже) или createRoot() (для React v18).

Использование¶

Вызовите hydrate для вложения React компонента в отрендеренный сервером browser DOM node.

1
2
3

import { hydrate } from 'react-dom';

hydrate(<App />, document.getElementById('root'));

Использование hydrate() для рендеринга приложения только для клиента (приложение без серверного рендеринга HTML) не поддерживается. Вместо этого используйте render() (в React 17 и ниже) или createRoot() (в React 18+).

Гидратация серверного рендеринга HTML¶

В React "гидратация" - это то, как React "присоединяется" к существующему HTML, который уже был отрисован React в серверной среде. Во время гидратации React попытается прикрепить слушателей событий к существующей разметке и взять на себя рендеринг приложения на клиенте.

В приложениях, полностью построенных на React, вы обычно будете гидратировать только один "корень", один раз при запуске для всего приложения.

1
2
3
4
5

<!--
HTML content inside <div id="root">...</div>
was generated from App by react-dom/server.
-->
<div id="root"><h1>Hello, world!</h1></div>

1
2
3
4
5

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

1
2
3

export default function App() {
    return <h1>Hello, world!</h1>;
}

Обычно вам не нужно вызывать hydrate снова или вызывать его в других местах. С этого момента React будет управлять DOM вашего приложения. Для обновления пользовательского интерфейса ваши компоненты будут использовать состояние.

Для получения дополнительной информации о гидратации смотрите документацию для hydrateRoot.

Подавление неизбежных ошибок несоответствия гидратации¶

Если атрибут или текстовое содержимое одного элемента неизбежно отличается на сервере и клиенте (например, метка времени), вы можете заглушить предупреждение о несоответствии гидратации.

Чтобы заглушить предупреждения о несоответствии гидратации для элемента, добавьте suppressHydrationWarning={true}:

1
2
3
4
5

<!--
HTML content inside <div id="root">...</div>
was generated from App by react-dom/server.
-->
<div id="root"><h1>Current Date: 01/01/2020</h1></div>

1
2
3
4
5

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

1
2
3
4
5
6
7

export default function App() {
    return (
        <h1 suppressHydrationWarning={true}>
            Current Date: {new Date().toLocaleDateString()}
        </h1>
    );
}

Он действует только на глубине одного уровня и предназначен для эвакуации. Не злоупотребляйте им. Если это не текстовое содержимое, React не будет пытаться исправить его, поэтому оно может оставаться непоследовательным до будущих обновлений.

Обработка различного содержимого клиента и сервера¶

Если вам намеренно нужно отобразить что-то разное на сервере и клиенте, вы можете сделать двухпроходной рендеринг. Компоненты, которые отображают что-то разное на клиенте, могут считывать переменную состояния, например isClient, которую вы можете установить в значение true в эффекте:

1
2
3
4
5

<!--
HTML content inside <div id="root">...</div>
was generated from App by react-dom/server.
-->
<div id="root"><h1>Is Server</h1></div>

1
2
3
4
5

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { useState, useEffect } from 'react';

export default function App() {
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        setIsClient(true);
    }, []);

    return <h1>{isClient ? 'Is Client' : 'Is Server'}</h1>;
}

Таким образом, начальный проход рендеринга будет рендерить тот же контент, что и сервер, избегая несоответствий, но дополнительный проход будет происходить синхронно сразу после гидратации.

Источник — https://react.dev/reference/react-dom/hydrate

Комментарии