了解 ReactJS 和 NodeJS 应用程序如何工作

Posted 2023-02-22

【中文标题】了解 ReactJS 和 NodeJS 应用程序如何工作

【英文标题】：Understanding how ReactJS and NodeJS app can work

【发布时间】：2017-09-04 13:41:09

【问题描述】：

我正在尝试学习 React JS，但我很难理解它应该如何与 NodeJS 一起工作，比如 Express。

到目前为止，我了解 ReactJS 在“MVC”中是“V” 这很简单，我已经可以使用 create-react-app 编写代码了

我是这样理解的：

结合 React 和 Express 的“自然”方式是简单地在 React 中编写前端，在 Express 中编写 api（例如使用 Mongo）。 这样我们就可以简单地从 React 向我们的 /api 进行 ajax 调用并显示数据

还有可能使用 React 来进行服务器端渲染，这需要更多的配置。这样我们就不用从 React 调用 /api，我们只是用 React 写代码，可以被 Express 渲染

我的问题是我想对了吗？ 不确定这一切... 同构 javascript 是否与 #2 有某种关联？

【问题讨论】：

是的，你的想法是对的。应用程序页面可以在服务器上生成或作为 SPA 下载。

【参考方案1】：

您大部分是正确的，但使用服务器端渲染并不意味着您永远不会发出 api 请求。服务器端渲染是一种用于改善初始加载时间的技术。与其拉下你的 javascript 包，然后调用一些 api 调用来加载它需要渲染的一堆数据，不如在服务器上对应用程序进行初始渲染和引导。然后将生成的 html 和应用程序的初始状态返回给客户端，以便可以立即向用户显示应用程序。因此，当谈论使用 react 进行服务器端渲染时，实际上是关于初始负载。

初始加载后，您仍然有一个动态前端应用程序。当用户与应用程序交互时，您最终仍然会发出 api 请求。如果我在应用程序中转到需要额外数据的不同路径（假设它是单页应用程序），我仍将发出 GET 请求以加载该数据。如果我单击一个按钮来更新资源，我仍然会发出 PUT 或 PATCH 请求来执行此操作。

因此，就表达和反应如何结合在一起的问题而言，表达（或您使用的任何后端语言/框架）提供了与数据存储中的数据交互的 API。 react 允许您构建使用这些 api 的视图。服务器端渲染只是您可以使用的一种附加技术，而不是完全独立的范例。

【讨论】：

非常感谢您的回答！