renderToString

const html = renderToString(reactNode, options?)

• Ссылка
  • renderToString(reactNode, options?)
• Использование
  • Преобразование дерева React в строку HTML
• Альтернативы
  • Миграция из renderToString на потоковый метод на сервере
  • Удаление renderToString из клиентского кода
• Отладка
  • Если компонент приостановлен, HTML всегда содержит резервный вариант

Ссылка

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 имеет ограниченную поддержку Suspense. Если компонент приостанавливается, renderToString немедленно отправляет свой резервный вариант как HTML.

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

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

Преобразование дерева React в строку HTML

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

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

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});

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

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

Миграция из renderToString на потоковый метод на сервере

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

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

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

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

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

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

// 🚩 Unnecessary: using renderToString on the client
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // For example, "<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); // For example, "<svg>...</svg>"

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

Отладка

Если компонент приостановлен, HTML всегда содержит резервный вариант

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

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

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