ReactDOMServer — это API, который позволяет рендерить React-компоненты в статическую HTML-разметку на сервере. Он в основном используется для серверного рендеринга (SSR), позволяя генерировать полный HTML на сервере и отправлять его клиенту, что улучшает производительность и SEO.
ReactDOMServer предоставляет два главных метода:
renderToString() — рендерит компоненты в HTML-строку с сохранением React-атрибутов для гидрации на клиентеrenderToStaticMarkup() — рендерит компоненты в статический HTML без специфичных для React атрибутов, полезен когда интерактивность не нужнаReactDOMServer обычно используется с Node.js-серверами, такими как Express, Hapi или Koa. Стандартный процесс включает:
renderToString() для преобразования корневого компонента в HTML-строкуimport { renderToString } from 'react-dom/server'
import MyPage from './MyPage'
app.get('/', (req, res) => {
res.write('<!DOCTYPE html><html><head><title>My Page</title></head><body>')
res.write('<div id="content">')
res.write(renderToString(<MyPage />))
res.write('</div></body></html>')
res.end()
})
renderToString() сохраняет React-специфичные атрибуты в HTML-выводе, которые необходимы для правильной работы гидрации на клиентской стороне.
Новый — ещё не проверен сообществом
Вы