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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы