Перейти к содержанию

renderToString

renderToString не поддерживает потоковую передачу или ожидание данных.

renderToString преобразует дерево React в строку HTML.

1
const html = renderToString(reactNode);

Описание

renderToString(reactNode)

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

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

const html = renderToString(<App />);

На клиенте вызовите hydrateRoot, чтобы сделать сгенерированный сервером HTML интерактивным.

Параметры

  • reactNode: Узел React, который вы хотите преобразовать в HTML. Например, JSX-узел типа <App />.

Возвращает

HTML-строку.

Предостережения

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

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

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

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

1
2
3
4
5
6
7
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 к потоковому методу на сервере

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

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

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

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

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

1
2
3
4
5
// 🚩 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:

1
2
3
4
5
6
7
8
9
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 prop в HTML. Содержимое не появится до тех пор, пока не загрузится клиентский код.

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

Источник — https://react.dev/reference/react-dom/server/renderToStaticNodeStream

Комментарии