renderToString

const html = renderToString(reactNode, options?)

• Ссылка
  • renderToString(reactNode, options?)
• Использование
  • Преобразование дерева React в строку HTML
• Альтернативы
  • Миграция из renderToString на потоковое отображение на сервере
  • Миграция из 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 Streams, используйте renderToReadableStream.

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

Миграция из renderToString на статическое предварительное отображение на сервере

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

Мы рекомендуем использовать следующие альтернативы:

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

Вы можете продолжить использовать 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. Содержимое не появится до тех пор, пока клиентский код не загрузится.

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