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 использует для ID, генерируемых 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.