连接 React 前端和 Node 后端的不同方法

React 前端和 NodeJS 后端的连接方式有很多种。在这篇博客中，我将介绍三种连接后端和前端的方法。这些方法也是大多数开发人员比较喜欢的。

先决条件

• React 和 NodeJS

让我们开始吧

1. 单服务器

第一种方式是使用一个服务器，在同一个域下同时服务 Node API 和 React SPA。此时数据仍然通过 JSON 进行交换。如上图所示，所有不以/api开头的路由都将由 React SPA 处理。
这种方式比较简单，您无需担心CORS错误🥶。
具体操作如下：

• 从 react app复制build文件夹文件并将其粘贴到publicNodeJS 服务器的文件夹中。
• 现在服务器文件夹index.html中的静态public

app.use(express.static(path.join('public')));
app.use((req,res) => {
   res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

优点

• 单台服务器。
• 不再有 CORS 错误😅
• 非常适合小型应用。

缺点

• 由于前端和后端都由同一台服务器处理，您可能会遇到性能问题。

2. 两台独立的服务器

这里我们需要两个独立的服务器。一个服务器提供静态 React SPA，另一个服务器提供 Node API。数据将通过 JSON 进行交换。

优点

• 由于我们对后端和前端使用两个不同的服务器，因此我们获得了更好的性能。
• 适合更大的应用。

缺点

• 必须维护两个不同的服务器。

3. 模板引擎

第三种方式，也是最不推荐的方式，是使用模板引擎（例如ejs、handlebars、pugjs等）进行服务器端渲染。这里我们不创建任何 REST API。
我们针对不同的 HTTP 请求渲染不同的 HTML 页面，并使用 React 预渲染页面的某些部分。
这不是连接 React 和 Node 的推荐方式，因为我们无法获得响应式用户体验的强大功能。

那么，你还知道哪些其他方法？你更喜欢哪种方法？请在下方评论区留言👇

⚒️ 本周工具⚒️

网页制作者

Web Maker 是一个离线网页开发平台，您可以在浏览器中使用。只需打开 Web Maker 并添加书签即可。

希望这些对你有帮助！
保存起来以作参考。在Twitter和LinkedIn
上关注我。关注我了解更多😃。