Реакция рендеринга на стороне сервера - Virtual DOM?

Использование рендеринга на стороне сервера в React делает не подразумевать, что React не будет использоваться на стороне клиента.

Один из полностью верных подходов - начать только с рендеринга на стороне клиента. В этом случае вам нужно настроить один элемент HTML в вашем HTML-файле, который станет ловушкой для React после его загрузки.

Чтобы дать вам пример, допустим, у нас есть элемент <div id = "root"></div> в файле index.html, который будет обслуживаться, если мы HTTP GET GET / path на нашем сервере. Исходный документ (в нашем случае index.html) также должен ссылаться на файл javascript, который включает React и наш код. Это можно сделать, добавив что-то вроде <script type = "text/javascript" src = "/index.js"></script> непосредственно перед тегом </body>.

В какой-то момент, когда выполняется index.js, вызывается метод ReactDOM.render() (примечание: мы находимся в браузере прямо сейчас) - это момент времени, когда React ищет элемент div с идентификатором root, прикрепленным к документу. После того, как он найден, он становится react-root - дерево компонентов монтируется под этим элементом и управляется React (то есть виртуальным DOM, обработчиками событий, обновлениями состояния).

Обратите внимание, что этот подход требует, чтобы по крайней мере один файл javascript был извлечен, проанализирован и выполнен, прежде чем браузер сможет сделать что-нибудь значимым (кроме пустого div) для пользователя. Для некоторых сценариев это неприемлемо, и здесь может помочь SSR (рендеринг на стороне сервера).

Для рендеринга на стороне сервера требуется, чтобы на вашем сервере была доступна среда выполнения JavaScript. Один из популярных вариантов - Node.js (другие включают, например, Nashron для JVM).

В подходе вы выполняете React на сервере и используете метод ReactDOMServer.renderToString() (или ReactDOMServer.renderToNodeStream()) для генерации ответа HTML, который отправляется клиенту - вместо почти пустого ответа с одним заполнителем div, как раньше, теперь вы можете отправить всю разметку, которая будет сгенерирован из вашего дерева компонентов (здесь важно отметить, что в React 16.4 (+) на стороне сервера вызывается только метод жизненного цикла UNSAFE_componentWillMount). После того, как первоначальный ответ с документом отправлен клиенту, браузер может отобразить начальную разметку еще до того, как index.js завершит загрузку. Как только это произойдет, сработает метод ReactDOM.hydrate(). Гидратация - это процесс использования существующей разметки, отображаемой на стороне сервера, и «поливки» ее с помощью javascript-функций, таких как обработчики событий. После того, как это будет сделано, это дерево компонентов теперь полностью управляется React со всеми преимуществами.

Обратите внимание, что в SSR точно такое же дерево компонентов отображается на стороне сервера, а затем гидратируется на стороне клиента.

Конечно, React также можно использовать вместо движков шаблонов в качестве очень мощного генератора статической разметки HTML. Все, что вам нужно сделать, это отобразить разметку на сервере с помощью ReactDOMServer. renderToStaticMarkup() и отправить ее клиенту. Следует отметить, что этот подход оказывает значительное влияние на производительность (https://malloc.fi/performance-cost-of-server-side-rendered-react-node-js) и использует очень ограниченное количество функций React.