React 站点怎么可能是静态的？

Question

我一直在开发一个带有 NodeJS/Express 后端的个人 React 项目（我对此还很陌生）。作为完成该项目的好方法，我想找出最终部署我的 React 应用程序的最佳方法（根据AWS 良好架构原则的 5 个支柱）。

虽然我有一些自己的想法，但我拿出谷歌并搜索它（“部署反应应用程序的最佳方式”），看看其他人是否已经通过最佳实践完成了这一点。首先出现的是这样的网站和这样的网站。建议是“使用 S3 存储桶”或“将其放在 Github 页面上”。

我感觉我失去了一些东西：

1. 当页面上的内容似乎根据某些请求和响应而变化时，React 应用程序怎么可能是静态的呢？
2. 我如何判断是否可以静态部署我的 React 应用程序（并单独部署我的后端）并将其放入 S3 存储桶中，或者我是否需要在服务器中运行我的 React 应用程序？

我一直认为我的应用程序是动态的，因为我允许用户执行注册和登录等操作......

谢谢

Answer 1

没有动态 JS 驱动功能的 HTML 页面的“静态”与静态站点不同。“静态”是指页面加载的资源，可以包括JS脚本资源。当您将服务器配置为像网站一样提供文件目录时，它就是静态站点。

React 应用程序（以及任何 JS 框架应用程序）不需要向服务器发出请求，尽管它们可以。是否可以在不编写服务器代码的情况下构建静态站点取决于应用程序的用例。如果您需要存储用户数据，仅静态站点是不够的。

要解决您的第一个问题：为您的静态资产提供服务的服务器不必是处理响应应用程序请求的同一服务器。我可以从 后面的基于 nginx 的快速服务器提供静态资产mysite.com，并处理 处的应用程序流量api.mysite.com，该流量路由到我的 Express 服务器。

这样，浏览器加载的页面是“静态的”，例如它总是接收相同的文件。但这些文件包含知道如何与我的应用程序服务器通信的脚本。

Answer 2

我认为“React”部分会让你失望。无论是 React、Angular、jQuery 还是“Vanilla”JavaScript，您的问题都是完全相同的。重要的问题是：即使您的应用程序是“动态”的（也称为根据用户事件更改内容），如何尽可能多地利用静态渲染。

首先要记住的是，当您构建 React 应用程序时，它会生成静态资产.. 引用 JavaScript 文件、css 文件等的 index.html 文件。您可以将包含这些文件的文件夹放入 S3 存储桶中，然后bam，静态网站。DOM 元素是在运行时创建的，并且用户与动态加载内容的 api 进行交互，这一事实并不会改变初始负载是静态的这一事实，就像您在浏览器中加载的每个 html 页面一样。

注意：您不必构建React 应用程序，但通常您这样做是为了转换 JSX -> JavaScript，也就是说，您不需要 JSX 来编写 React 应用程序。

接下来要记住的是，React 可以在服务器端用来渲染模板，就像老式的 php + html （或其他）： https: //reactjs.org/docs/react-dom-server.html。很长一段时间以来，它一直是 React API 的一部分。这意味着您的初始有效负载可以包含 DOM 元素，而无需在浏览器中加载任何 JavaScript。然后，当用户与您的 api 交互时，您可以动态加载更多内容，或者您​​可以向用户发送另一个在服务器端呈现的 html 有效负载。显然，现在这不是很典型，而是使用前一种方法，仅在服务器端渲染初始 DOM，并实时加载更多内容。

有许多库可以帮助静态渲染，例如https://github.com/react-static/react-static 。

你可以使用这样的工具吐出很多html页面。当您提前知道内容是什么时，这会很有帮助。显然，如果某些内容确实是动态的，例如过滤 api 调用结果的数据表，那么您将不会拥有包含所有可能的预渲染 DOM 的 html 页面。有些东西只是动态的，但无论您使用什么 JavaScript 库都是一样的。