renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• Ссылка
  • renderToStaticMarkup(reactNode, options?)
• Использование
  • Рендеринг неинтерактивного дерева React в строку HTML

Ссылка

renderToStaticMarkup(reactNode, options?)

На сервере вызовите renderToStaticMarkup для рендеринга вашего приложения в HTML.

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

const html = renderToStaticMarkup(<Page />);

В результате будет получен неинтерактивный HTML-вывод ваших компонентов React.

См. дополнительные примеры ниже.

Параметры

• reactNode: Узел React, который вы хотите преобразовать в HTML. Например, JSX-узел, такой как <Page />.
• необязательно options: Объект для серверного рендеринга.
  • необязательно identifierPrefix: Строковый префикс, который React использует для идентификаторов, сгенерированных функцией useId. Полезно для предотвращения конфликтов при использовании нескольких корней на одной странице.

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

Строка HTML.

Ограничения

• renderToStaticMarkup вывод не может быть гидратирован.

• renderToStaticMarkup поддерживает ограниченное количество возможностей Suspense. Если компонент приостанавливается, renderToStaticMarkup сразу отправляет свой резервный вариант в виде HTML.

• renderToStaticMarkup работает в браузере, но использование в клиентском коде не рекомендуется. Если вам нужно преобразовать компонент в HTML в браузере, получите HTML, рендеринг в узел DOM.

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

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

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

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

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

Это создаст начальный неинтерактивный HTML-вывод ваших компонентов React.