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

Question

最近刚学了react，打算在下一个项目中使用。我遇到过几次 react 服务器端渲染，但想知道为什么我们在“现代”仍然需要它。

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

但是在使用 webpack 生产配置和 gzip 构建之后，整个包(包括 react 、我的代码和很多其他东西)只需要 40kb，而且我有 aws CDN。我不太明白为我的情况使用服务器端渲染的原因。

所以问题是，如果生成的 javascript 包在 gzip 之后非常小，为什么人们仍然使用服务器端呈现？

Answer 1

加载时间

应用程序的呈现 View 可以在初始 HTTP 请求的响应中传递。在传统的单页 Web 应用程序中，第一个请求会返回，浏览器会解析 HTML，然后对脚本发出后续请求——最终呈现页面。这些请求仍然会发生，但它们永远不会妨碍用户查看初始数据。

这对快速互联网连接没有太大影响，但对于网络覆盖率较低区域的移动用户而言，这种初始数据呈现可以使应用呈现速度加快 20-30 秒。

具有静态数据的 View 也可以在网络级别缓存，这意味着 React 应用程序的呈现 View 可以以非常少的计算开销提供服务

搜索引擎优化

当搜索引擎爬虫到达网页时，会提供 HTML 并检查静态内容并为其编制索引。在纯客户端 Javascript 应用程序中，没有静态内容。一旦适当的脚本加载并运行，它就会全部创建并动态注入(inject)。

与 React 不同，大多数框架无法将其组件图序列化为 HTML，然后再将其重新填充。他们必须使用 a more convoluted approach ，这通常涉及在服务器的 headless 浏览器中呈现他们的页面，然后在爬虫请求时提供该版本。

React 可以从服务器端 JS 环境(如 Node.js)将组件树渲染为 HTML 字符串，然后立即提供服务。无需 headless 浏览器或额外的复杂功能。

无脚本

它还允许您编写应用程序 gracefully degrade最终，可以用作瘦客户端。这意味着处理在服务器上进行，应用程序可以在禁用 Javascript 的浏览器中使用。这是否是一个需要考虑的重要市场是另一个时间的争论。