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

Question

8

我最近学习了React，并打算在我的下一个项目中使用它。我已经多次遇到了React服务器端渲染，但不知道在“现代时代”为什么还需要它。

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

但是，在使用webpack生产配置和gzip构建后，整个捆绑包（包括React，我的代码和许多其他内容）只占用40KB，并且我有aws CDN可供使用。我不太明白为什么要在我的情况下使用服务器端渲染。

因此，问题是如果生成的JavaScript捆绑包在gzip之后如此微小，为什么人们仍然使用服务器端渲染？

- Egoist_sx

4

复杂的网站在客户端上渲染时可能需要相对较长的时间，特别是在移动客户端上。拥有一个预渲染版本可以减少这种延迟。 - Jeremy

1

最小化客户对网络延迟的感知并提升SEO。 - Shashank

绝对同意@Shashank的观点，搜索引擎目前还无法索引完全由JavaScript驱动的应用程序。 - simonzack

4个回答

1

全或无渲染

这是一个用户体验问题，一些设计师决定不喜欢逐步渲染。设计师希望页面完整无缺地显示出来，没有加载旋转图标、零散的获取文本插入和布局位移。

滚动条恢复 是客户端渲染的一个难题。请参见导航返回时保持滚动位置（当前进后退时，滚动位置会丢失）。服务器端渲染不会遇到这个问题。

- golopot

0

我认为如果你追求SEO，最好在服务器上进行渲染。这样所有的内容都将被搜索引擎机器人读取。

- akul

1

仅在服务器上呈现initialState()并在客户端为每个入口点和SEO机器人呈现其他内容是否足够，以便它们可以找到我的网站？ - Egoist_sx

0

除了上述的SEO之外，使用SSR浏览器可以在所有Java Script文件加载完成之前立即呈现页面。我有一篇教程来解释这个问题。

- BlueStory

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Prince · Accepted Answer

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

这在快速互联网连接上没有太大区别，但对于处于低网络覆盖区域的移动用户来说，数据的初始渲染可以使应用程序渲染更快20-30秒。

具有静态数据的视图也可以在网络层面上缓存，这意味着React应用程序的渲染视图可以以非常少的计算开销提供。

当搜索引擎爬虫到达网页时，HTML被提供并且静态内容被检查和索引。在纯客户端JavaScript应用程序中，没有静态内容。一旦适当的脚本加载和运行，所有内容都是动态创建和注入的。

与 React 不同的是，大多数框架没有序列化它们的组件图形以及重新填充的方式。它们必须使用更加复杂的方法（更多细节），通常需要在服务器上使用无头浏览器渲染页面，然后每当爬虫请求时提供该版本。

React 可以从类似于 Node.js 的服务器端 JS 环境中直接将组件树呈现为 HTML 字符串，然后立即提供服务。无需使用无头浏览器或额外的复杂性。

此外，它还允许您编写应用程序，优雅地降级并最终可以用作瘦客户端。这意味着处理在服务器上进行，可以在禁用 Javascript 的浏览器中使用该应用程序。是否考虑这是一个重要的市场是另一回事。