将服务器端渲染添加到现有的React应用

Question

我正在尝试构建适合我需求的React应用入门。我已经阅读，下载并测试了无数的React样板，以尝试了解如何添加SSR，但现在我有点受阻。

The github repo is here

到目前为止，我已经通过热重载运行了React。 Webpack 4捆绑了客户端代码。我将代理与webpack-dev-server（WDS）一起使用，以服务于我的后端express api和开发客户端。 更新应用客户端代码时，WDS热重载更改。快递服务器不会以这种方式重新启动。 我使用nodemon监视服务器的更改，以便在编码api功能时仅后端重启。

对于生产，我只需将服务器和客户端构建到dist文件夹，然后将应用程序与节点一起提供。

稍后我计划添加React路由器，redux等，但这是简单的部分。

所以我现在想添加的是生产模式的服务器端渲染（SSR），因为我不需要开发它。

关于如何实现该目标的任何想法？

谢谢

Answer 1

我将发布进一步的分析。

现在，我启动一个webpack-dev-server，该服务器允许我在localhost：3000上提供服务并热重载客户端应用程序 我还在localhost：8080上启动了一个Express服务器，并使用proxy

的devServer属性将其连接到客户端。

如果我在客户端应用程序上修改代码，则仅触发热重装 如果我在express api上修改代码，则仅重新启动服务器api

据我了解，将SSR和热重载结合在一起的原因是，现在需要在Express服务器中编译Webpack，然后添加开发服务器和热重载中间件。

但是，如果每次我修改api节点的代码时都这样做，monmon将重新启动服务器，然后webpack将编译客户端代码，但是我不需要这样做，因为我只修改了api。

我认为我需要做的是保留开发部分的内容（因为我不需要将SSR用于开发），而是添加仅在NODE_ENV=production时才执行的生产代码，专门用于通过所有renderToString逻辑为生产提供服务的html模板

那听起来怎么样？

Answer 2

签出Paragons。它具有Webpack 4，路由器，redux等，所有这些都可以与SSR一起使用。另外，它具有开发和生产模式。