如何在 Express.js 中将 SSR 添加到现有的 React.js 应用程序答案

【问题标题】：How to add SSR to existing React.js application in Express.js如何在 Express.js 中将 SSR 添加到现有的 React.js 应用程序
【发布时间】：2021-09-06 21:57:02
【问题描述】：

我有一个简单的 React 应用程序，我想在 Express.js 中添加 SSR。

我在开始时犯了一些错误，在我的存储库中，我只有一个前端文件夹，其中包含配置了 typescript、babel 和 webpack 的整个 React 应用程序。

我还没有玩过SSR，所以我很好奇，如果我想制作这样一个服务器并将其文件放在前端文件夹旁边的文件夹中，我是否必须安装并设置我所有的依赖项在`frontend文件夹中创建，然后才创建server.js文件？

然后在“frontend/src”中间我会有 2 个文件 - index.tsx（使用 React.render() 方法），因为我希望能够在没有服务器的情况下运行应用程序。第二个文件是 indexServer.tsx 和 React.hydrate() 方法，它将转到 server.js 文件（即用于通过服务器生成应用程序）。这个概念对吗？

使用这个 React 应用链接到我的 github 存储库：https://github.com/poldeeek/spider-game

【问题讨论】：

标签： javascript node.js reactjs express server-side-rendering

【解决方案1】：

如果我想制作这样一个服务器并将其文件放在前端文件夹旁边的文件夹中，我是否必须安装并设置我在`frontend 文件夹中创建的所有依赖项，然后才能创建 server.js文件？

如果您选择像这样设置两个单独的文件夹，您可能需要重新安装所有依赖项。我建议将server.js 放入frontend/server，然后它可以使用与frontend/src/index.js 相同的node_modules。

然后在“frontend/src”中间我会有 2 个文件 - index.tsx（使用 React.render() 方法），因为我希望能够在没有服务器的情况下运行应用程序。第二个文件是 indexServer.tsx 和 React.hydrate() 方法，它将转到 server.js 文件（即用于通过服务器生成应用程序）。这个概念对吗？

这里没有正确或错误的答案。如果此设置适合您的需求，请继续使用。此设置的唯一挑战是您必须将 babel 和 webpack 配置为指向两个不同的文件：index.tsx（如果您不想要服务器）和indexServer.tsx（如果您想要包含服务器） .

【讨论】：