当前位置: 首页 > 面试题库 >

为什么要使用React服务器端渲染

逄征
2023-03-14
问题内容

我刚刚学会了最近的反应,打算将其用于下一个项目。我已经遇到过几次反应服务器端渲染,但是想知道为什么在“现代时代”我们仍然需要它。

在本文中,它认为通过服务器端渲染,用户不必等待从CDN或其他地方加载这些js即可看到初始静态页面,并且该页面将在js到达时恢复功能。

但是在使用webpack生产配置和gzip构建之后,整个捆绑包(包括react,我的代码和许多其他东西)仅占用40kb,而我使用的是aws
CDN。对于我的情况,我不太清楚使用服务器端渲染的原因。

所以问题是,如果在gzip之后生成的javascript包是如此之小,为什么人们仍然使用服务器端渲染?


问题答案:

加载时间

可以在初始HTTP请求的响应中交付应用程序的渲染视图。在传统的单页Web应用程序中,第一个请求将返回,浏览器将解析HTML,然后对脚本进行后续请求-
最终将呈现页面。这些请求仍然会发生,但是它们永远不会妨碍用户查看初始数据

这对于快速的Internet连接并没有太大的影响,但是对于网络覆盖率较低区域中的手机用户而言,这种最初的数据渲染可以使应用程序渲染速度提高20-30秒。

具有静态数据的视图也可以在网络级别缓存,这意味着可以以很少的计算开销为React应用程序的渲染视图提供服务。

搜索引擎优化

当搜索引擎搜寻器到达网页时,将提供HTML并检查静态内容并建立索引。在纯客户端Javascript应用程序中,没有静态内容。一旦加载并运行了适当的脚本,就会动态创建和注入所有文件。

与React不同,大多数框架无法将其组件图序列化为HTML,然后对其进行重新充气。他们必须使用更复杂的方法,该方法通常涉及在服务器的无头浏览器中呈现其页面,然后在搜寻器请求时提供该版本。

React可以将组件树从服务器端JS环境(例如Node.js)呈现为HTML字符串,然后立即将其提供。无需无头浏览器或其他复杂功能。

Noscript

它还允许您编写可以正常降级并最终可用作瘦客户端的应用程序。这意味着处理在服务器上进行,并且可以在禁用Javascript的浏览器中使用该应用程序。那是否是一个需要考虑的重要市场是另一个争论。



 类似资料:
  • 与传统 SPA(Single-Page Application - 单页应用程序)相比,服务器端渲染(SSR)的优势主要在于: 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意,截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里,同步是关键。如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,

  • 问题内容: 我是React和Redux的新手。虽然我知道React只是一个视图层。但是我看到一个术语“ React可以在服务器端渲染中使用”。这是什么意思,以及它如何使用nodejs在后台运行。有人可以帮助我弄清“服务器端呈现什么是反应”这一事实。 问题答案: 该包装包括一个模块。该模块允许您使用将应用程序呈现为简单的HTML字符串。基本上是给定的一组视图的快照: https://facebook

  • 问题内容: 我正在尝试为我的react应用设置服务器端渲染,并且试图使用出色的react-router模块来处理非js情况(某些爬虫,当用户关闭js时,原因)。但是,我遇到了麻烦。我一直在这里使用出色的响应作为各种指南,但我却遇到了奇怪的错误。尝试使用时,我会坚持不懈。我是否设置了服务器端渲染错误,缺少明显的东西或其他东西? 我的设置: 真正的基本Express服务器 顶级反应组件 输出: 问题答

  • 从节点(express)服务器端渲染时,我无法将初始道具传递到我的React组件 以下是我的组件的简短版本: 这是服务器端 在render()方法中尝试使用组件时,prop似乎没有传递给组件 有什么想法吗?

  • Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。

  • 问题内容: 我试图弄清楚为什么在他提供的示例中首先需要服务层。如果你将其取出,则可以在客户中执行以下操作: 似乎服务层只是DAO的包装。有人可以给我一个情况,如果服务层被删除,情况可能会变得一团糟?我只是看不到拥有服务层的意义。 问题答案: 让服务层成为DAO的包装是一种常见的反模式。在你提供的示例中,它肯定不是很有用。使用服务层意味着你将获得以下好处: 你需要在控制器中最好完成的Web类型活动和