hydrate

Deprecated

hydrate(reactNode, domNode, callback?)

• Ссылка
  • hydrate(reactNode, domNode, callback?)
• Использование
  • Гидратация серверно-отрендеренного HTML
  • Предотвращение неизбежных ошибок несоответствия гидратации
  • Обработка разного содержимого на стороне клиента и сервера

Ссылка

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 18+) вместо этого.

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

Вызовите hydrate для подключения React-компонента к серверно-отрендеренному узлу DOM браузера.

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

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

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

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

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

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

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

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

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

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

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

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

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

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