Добавление рендеринга на стороне сервера в существующее приложение React

Question

Я пытаюсь создать приложение для запуска реакции, которое соответствует моим потребностям. Я прочитал, скачал, протестировал бесчисленное множество реактивных шаблонов, чтобы попытаться понять, как добавить SSR, но я застрял прямо сейчас.

Репозиторий Github здесь

Пока у меня React работает с горячей перезагрузкой. Webpack 4 связывает клиентский код. Я использую прокси с webpack-dev-server (WDS), чтобы обслуживать мой backind express api, а также мой клиент для разработки. Горячая перезагрузка WDS изменяется при обновлении кода клиента приложения. Экспресс-сервер не перезапускается таким образом. Я использую nodemon, чтобы наблюдать за изменениями сервера, так что только бэкэнд перезапускается, когда я кодирую функции API.

Для производства я просто собираю сервер и клиент в папку dist и обслуживаю приложение узлом.

Позже я планирую добавить React router, redux и т. Д., Но это самая простая часть.

Итак, я хотел бы добавить сейчас рендеринг на стороне сервера (SSR) для производственного режима, так как он мне не нужен для разработки.

Есть идеи, как мне это реализовать?

Спасибо

Answer 1

Выезд Paragons . Он имеет Webpack 4, маршрутизатор, Redux и многое другое, все работает с SSR. Кроме того, у него есть режимы разработки и производства.

Answer 2

выложу дальнейший анализ.

Прямо сейчас я запускаю webpack-dev-server, который позволяет мне обслуживать и перезагружать клиентское приложение на localhost: 3000 Я также запускаю экспресс-сервер на localhost: 8080 и подключаю его к клиенту, используя атрибут proxy devServer

Если я изменяю код в клиентском приложении, запускается только горячая перезагрузка Если я изменяю код на Express API, только сервер API перезапускается

Исходя из того, что я понимаю, из-за того, что SSR и «горячая перезагрузка» соединены вместе, так это то, что теперь веб-пакет должен быть скомпилирован на экспресс-сервере, и я добавил dev-сервер и промежуточное ПО для «горячей» перезагрузки.

Но если я сделаю это каждый раз, когда я изменяю код api nodemon, то перезапускаю сервер, а затем webpack скомпилирует код клиента, но мне это не нужно, так как я изменил только api.

То, что я должен сделать, это оставить все как есть для части разработки (потому что мне не нужен SSR для dev), но добавить производственный код, который будет выполняться, только если NODE_ENV=production, добавить шаблон, выделенный обслуживать HTML для производства со всей логикой renderToString

Как это звучит?