renderToStaticMarkup

Довідник

renderToStaticMarkup(reactNode)

На сервері викличте renderToStaticMarkup, щоб відрендерити ваш застосунок у HTML.

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

const html = renderToStaticMarkup(<Page />);

Він створить неінтерактивний HTML-вивід ваших React-компонентів.

Дивіться більше прикладів нижче.

Параметри

• reactNode: Вузол React, який ви хочете відрендерити в HTML. Наприклад, JSX-вузол типу <Page />.
.
• опціонально options: Об'єкт для серверного рендерингу.
  • optional identifierPrefix: Рядковий префікс, який React використовує для ідентифікаторів, згенерованих useId. Корисно для уникнення конфліктів при використанні декількох коренів на одній сторінці.

Повернення

Рядок HTML.

Застереження

• renderToStaticMarkup вихід не може бути гідратований.

• renderToStaticMarkup має обмежену підтримку підвішеного стану. Якщо компонент призупиняється, 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-компонентів.