hydrate¶

Устарело

Этот API будет удален в одной из будущих основных версий React.

В React 18 hydrate был заменен на hydrateRoot. Использование hydrate в React 18 предупредит, что ваше приложение будет вести себя так, как будто оно работает под управлением React 17.

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

hydrate(reactNode, domNode, callback?)

Описание¶

`hydrate(reactNode, domNode, callback?)`¶

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

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.

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, вы обычно будете гидратировать только один "корень", один раз при запуске для всего приложения.

index.htmlindex.jsApp.jsCodeSandbox

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

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

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

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

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

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

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

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

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

index.htmlindex.jsApp.jsCodeSandbox

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

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

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

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

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

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

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

index.htmlindex.jsApp.jsCodeSandbox

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

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

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

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>;
}

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

Такой подход делает процесс гидратации медленнее, поскольку ваши компоненты должны отображаться дважды. Помните о пользовательском опыте на медленных соединениях. Код JavaScript может загружаться значительно позже, чем первоначальный HTML-рендеринг, поэтому отображение другого пользовательского интерфейса сразу после гидратации может показаться пользователю резким.

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

hydrate¶

Описание¶

hydrate(reactNode, domNode, callback?)¶

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

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

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

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

Комментарии

`hydrate(reactNode, domNode, callback?)`¶