Какой примерно код должен быть в скрипте для NodeJS для выполнения серверного рендеринкга SPA на React?

Question

[Ken Jee]

Вопрос от новичнка в React. Имеется SPA React-приложение собранное при помощи Webpack. Все работает отлично. Запрос на сервер возвращает нам index.html без "полезного" контента, а только лишь с начальным скелетом разметки и с подключением файла bundle.js внутри. Дальше bundle.js делает свое дело. Ходим-бродим по приложению - видим нужное наполнение на соответствующих страницах. Т.е. роуты работают, компоненты рендарятся и обновляются. Теперь нужно сделать так, чтоб при запросе на сервер возвращалась страница уже наполненная соответствующим запрошенному УРЛу контентом. Т.е. чтоб bundle.js выполнился на сервере, а не на клиенте. Гуглил много. Выяснил, что это делается путем установки на сервер NodeJS и модуля Express. Тут тоже вроде все понятно. Непонятно, как выглядит примерно код скрипта для NodeJS, который будет принимать запрос от клиента и рендерить соответствующую страницу, т.е. выполнять соответствующий роут для запрошенного УРЛа из bundle.js используемого в index.html react-приложения. Может у кого-то есть пример кода, который решает подобную задачу? Ну, или ссылка на инфу по теме. Буду признателен!

Comments

[Никита Кит]

Я сам не пробовал (поэтому точно не отвечу) но в теории представляю как это работает. Экспресс умеет создавать коллбэки на соответствующие события, например запрос к серверу. По запросу нужно будет попросить сборщик сложить весь скомпилированный код в корень сервера, в соответствующую папку.
Относительно сборщика, я бы посмотрел на него:
https://parceljs.org/
У него самая высокая скорость бандлинга - на сервере это имеет значение. Ну и в документации react почитай про SSR - наверняка что-то об этом есть

[Антон Спирин]

Никита Кит, не стоит раздавать советы основанные на домыслах. react ssr реализуют совершенно по-другому.

Автор, вы гуглить пробовали? Если нет попробуйте: react server side rendering и isomorphic react application. Найдете все статьи и руководства на эту тему.
В самом простом случае вам хватит babel-node и ReactDOMServer.

Answer 1

[Anubis]

https://redux.js.org/docs/recipes/ServerRendering.html
Я по этому гайду смог достичь желаемого функционала. Вместо Express заюзал более современный Koa. Суть в том, чтобы при обращении к нужной к рендерингу страницы, (если нужно, асинхронно) заполучить некие данные, выстроить на их основе первоначальное состояние store, выполнить renderToString из 'react-dom/server', полученный html внедрить в основной html, также внедрить в основной html состояние стора после рендеринга (см. window.__PRELOADED_STATE__ по ссылке) и выдать итоговый ответ в браузер. Далее на клиенте заюзать createStore, используя содержимое переменной стора, полученной от сервака, и юзать не ReactDOM.render, а ReactDOM.hydrate.