renderToString

Посилання

renderToString(reactNode)

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

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

const html = renderToString(<App />);

На клієнтській стороні викликати hydrateRoot, щоб зробити згенерований сервером HTML інтерактивним.

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

Параметри

• reactNode: Вузол React, який ви хочете відрендерити в HTML. Наприклад, JSX-вузол типу <App />.

.

• опція опції: Об'єкт для серверного рендерингу.

  • optional 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.

// 🚩 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. Вміст не з'явиться, поки не завантажиться клієнтський код.

Щоб вирішити цю проблему, скористайтеся одним із рекомендованих потокових рішень. Вони можуть передавати вміст частинами, коли він вирішується на сервері, щоб користувач бачив поступове заповнення сторінки до завантаження клієнтського коду.