renderToString

const html = renderToString(reactNode, options?)

• Справка
  • renderToString(reactNode, options?)
• Применение
  • Рендеринг дерева React как строки HTML
• Альтернативные варианты
  • Переход от renderToString к потоковому методу на сервере
  • Удаление renderToString из клиентского кода
• Поиск неисправностей
  • Когда компонент приостанавливается, HTML всегда содержит fallback

Справка

renderToString(reactNode, options?)

На сервере вызовите renderToString, чтобы отрендерить ваше приложение в HTML.

import { renderToString } from 'react-dom/server';

const html = renderToString(<App />);

На клиенте вызовите hydrateRoot, чтобы сделать интерактивным HTML, который сгенерировал сервер.

Смотрите больше примеров ниже.

Параметры

• reactNode: Узел React, который вы хотите отрендерить в HTML. Например, JSX узел типа <App />.

• необязательный options: Объект для серверного рендера.

  • необязательный identifierPrefix: Строковый префикс, который React использует для генерации идентификаторов с помощью useId. Полезен, чтобы избежать конфликтов между разными корневыми элементами на одной и той же странице. Должен совпадать с префиксом, переданным в hydrateRoot.

Возвращаемое значение

Строка HTML.

Предостережения

• renderToString имеет ограниченную поддержку задержки. Если компонент приостановлен, renderToString немедленно отправляет fallback в виде HTML.

• renderToString работает в браузере, но использовать его в клиентском коде не рекомендуется.

Применение

Рендеринг дерева React как строки HTML

Вызовите renderToString, чтобы отрендерить ваше приложение в строку HTML, которую вы можете отправить вместе с ответом вашего сервера:

import { renderToString } from 'react-dom/server';

// Синтаксис обработчика маршрута зависит от вашего бэкенд-фреймворка
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});

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

Альтернативные варианты

Переход от renderToString к потоковому методу на сервере

renderToString немедленно возвращает строку, поэтому он не поддерживает потоковую передачу или ожидание данных.

Мы рекомендуем использовать эти полнофункциональные альтернативы, когда это возможно:

• Если вы используете Node.js, используйте renderToPipeableStream.
• Если вы используете Deno или современную пограничную среду выполнения с Web Streams, используйте renderToReadableStream.

Вы можете продолжать использоватьrenderToString, если среда вашего сервера не поддерживает потоки.

Удаление renderToString из клиентского кода

Иногда renderToString используют на клиенте для преобразования какого-либо компонента в HTML.

// 🚩 Лишнее: использование renderToString на клиенте
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // Например, "<svg>...</svg>"

Импорт react-dom/server на клиенте излишне увеличивает размер пакета, и этого следует избегать. Если вам в браузере нужно преобразовать какой-либо компонент в HTML, используйте createRoot и читайте HTML из DOM:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // Например, "<svg>...</svg>"

Вызов flushSync необходим, чтобы DOM обновлялся перед чтением его свойства innerHTML.

Поиск неисправностей

Когда компонент приостанавливается, HTML всегда содержит fallback

renderToString не полностью поддерживает задержку.

Если какой-либо компонент приостанавливается (например, потому что он определен с lazy или извлекает данные), renderToString не будет ждать разрешения своего содержимого. Вместо этого renderToString найдет ближайшую <Suspense> границу над ней и отрендерит её fallback в HTML. Содержимое не появится, пока не загрузится клиентский код.

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