React网站怎么可能是静态的?

时间:2019-12-08 17:30:17

标签: reactjs amazon-web-services amazon-s3

我一直在开发一个带有NodeJS / Express后端的个人React项目(我现在还很新)。作为整个项目的好方法,我想找出最好的方法(就5 Pillars of the AWS Well Architectured Principles而言),以最终部署我的react应用。

尽管我有一些自己的想法,但我还是拔出了google并进行了搜索(“部署React应用的最佳方法”),以查看其他人是否已经通过最佳实践做到了这一点。首先弹出的是thisthis之类的网站。建议是“使用S3存储桶”或“将其放在Github页面上”。

我觉得我缺少什么:

  1. 当页面上的内容似乎根据某些请求和响应而改变时,React应用程序怎么可能是静态的?
  2. 如何判断是否可以静态部署React应用(并分别部署后端)并将其放入S3存储桶中还是我是否需要在服务器中运行React应用?

我一直觉得我的应用程序是动态的,因为我允许用户执行注册和登录之类的操作...

谢谢

2 个答案:

答案 0 :(得分:4)

没有动态JS驱动功能的HTML页面的“静态性”与静态站点不同。 “静态”是指页面加载的资产,其中可以包括JS脚本资产。当您配置服务器以将文件目录作为网站来提供服务时,这就是静态站点。

反应应用程序(和任何JS框架应用程序)尽管可以,但无需向服务器发出请求。是否可以在不编写服务器代码的情况下构建静态站点取决于您的应用程序的用例。如果您需要存储用户数据,那么仅静态站点就不会削减它。

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

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

答案 1 :(得分:3)

我认为“反应”部分会让您失望。您的问题是React,Angular,jQuery还是“ Vanilla” JavaScript完全相同。重要的问题是:即使您的应用程序是“动态的”(又根据用户事件来更改内容),您如何利用尽可能多的静态呈现。

要记住的第一件事是,在构建React应用程序时,它会吐出静态资产。一个引用JavaScript文件,css文件等的index.html文件。您可以将包含这些文件的文件夹夹入一个S3 bucket和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库,都是一样的。