ReactJS服务器端渲染与客户端渲染

JavaScript

GO前端

2020-03-12

我刚刚开始研究ReactJS,发现它为您提供了两种呈现页面的方法:服务器端和客户端。但是,我不知道如何一起使用。是使用两种单独的方法来构建应用程序,还是可以将它们一起使用?

如果可以一起使用,该如何做-我们是否需要在服务器端和客户端重复相同的元素?或者,是否可以只在服务器上构建应用程序的静态部分,而在客户端上构建动态部分,而无需与已经预先渲染的服务器端建立任何连接?

第914篇《ReactJS服务器端渲染与客户端渲染》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
理查德村村小宇宙 2020.03.12

我实际上很想知道相同的研究,虽然您正在寻找的答案已在评论中给出,但我认为它应该更加突出,因此我正在写这篇文章(一旦我能提出一个建议,我将对其进行更新。更好的方法,因为我发现解决方案在架构上至少有问题)。

您将需要同时考虑两种方式编写组件,从而基本上将if开关放置在各处以确定您是在客户端还是在服务器上,然后作为数据库查询(或服务器上任何适当的方式)或REST调用(在服务器上)进行。客户)。然后,您将不得不编写端点来生成数据并将其公开给客户端,然后就可以使用了。

同样,很高兴了解更清洁的解决方案。

米亚小哥斯丁 2020.03.12

Image source: Walmart Labs Engineering Blog

固态继电器

企业社会责任

NB: SSR (Server Side Rendering), CSR (Client Side Rendering).

与SSR的主要区别在于,服务器对客户端浏览器的响应包括要呈现的页面的HTML。同样重要的是要注意,尽管使用SSR,页面渲染速度更快。在下载JS文件并且浏览器执行React之前,该页面将无法进行用户交互。

缺点是SSR TTFB(至第一个字节的时间)可能会稍长。可以这样理解,因为服务器需要一些时间来创建HTML文档,这反过来又增加了服务器的响应大小。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android