Использование рендеринга на стороне сервера в React не означает , что React не будет использоваться на стороне клиента.
Один из полностью подходящих подходов - начать только с рендеринга на стороне клиента. В этом случае вам нужно настроить один HTML-элемент в вашем HTML-файле, который станет хуком для React после его загрузки.
Просто для примера, скажем, у нас есть элемент <div id="root"></div> в файле index.html, который будет обслуживаться, если мы будем использовать HTTP GET / путь на нашем сервере. Исходный документ (в нашем случае 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.