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

Question

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

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

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

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

使用此反应应用程序链接到我的 github 存储库： https : //github.com/poldeeek/spider-game

Answer 1

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

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

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

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