首页 文章

将服务器端呈现添加到现有的React应用程序

提问于
浏览
0

我正在尝试构建一个适合我需求的反应式应用程序启动器 . 我已经阅读,下载,测试了无数的反应样板,试图了解如何添加SSR,但我现在有点卡住了 .

The github repo is here

到目前为止,我已经让React运行了热重载 . Webpack 4捆绑了客户端代码 . 我使用webpack-dev-server(WDS)代理服务我的后端express api以及我的客户端进行开发 . 更新应用客户端代码时WDS热重新加载更改 . 快速服务器不会以这种方式重新启动 . 我使用nodemon来监视服务器的更改,以便在编写api功能时只有后端重新启动 .

对于 生产环境 ,我只需将服务器和客户端构建到dist文件夹,并使用节点为应用程序提供服务 .

后来我计划添加React路由器,redux等,但这很容易 .

所以我现在要添加的是 生产环境 模式的服务器端渲染(SSR),因为我不需要它进行开发 .

关于如何实现这一点的任何想法?

谢谢

3 回答

  • 0

    我将发布进一步的分析 .

    现在我启动一个webpack-dev服务器,允许我在localhost上运行和热重新加载客户端应用程序:3000我还在localhost:8080上启动了一个快速服务器,并使用 devServerproxy 属性将其连接到客户端

    如果我修改客户端应用程序上的代码只触发热重新加载如果我修改快速api上的代码只重新启动服务器api

    从我对SSR和热重载的理解是,webpack现在需要在快速服务器中编译,我添加了一个开发服务器和一个热重载中间件 .

    但是,如果我这样做,每次修改api nodemon的代码将重新启动服务器,然后webpack将编译客户端代码,但我不需要,因为我只修改了api .

    我认为我需要做的是保留开发部分的内容(因为我不需要开发SSR),但添加一个只有在 NODE_ENV=production 时才会执行的 生产环境 代码,添加专用于为html服务的模板 生产环境 所有 renderToString 逻辑

    那声音怎么样?

  • 0

    看看Paragons . 它有Webpack 4,路由器,redux等等都与SSR一起工作 . 此外,它还具有开发和 生产环境 模式 .

  • -1

    通过服务器提供您的dist文件夹:

    app.use(express.static('dist'));

相关问题