React 服务端渲染指南

---

服务端渲染技术已经存在一段时间了。它首次出现在21世纪初，此后被许多网站使用。

这项技术的理念是在服务器上预渲染HTML页面，并在客户端请求时将其发送回客户端浏览器。

使用服务端渲染 (SSR)，页面在服务器上进行渲染。这确保了即使在页面加载到浏览器之前，用户也可以访问页面。

我们将在本文中进一步了解 SSR -

服务端渲染 (SSR) 的工作原理？

这是在将网页发送到浏览器之前在服务器上渲染网页的过程。因此，当服务器返回一个准备渲染的 HTML 页面和必要的 JS 脚本时，所有静态元素都会立即在 HTML 中呈现。

同时，浏览器下载并执行 JS 代码，这使得页面具有交互性。浏览器现在处理此页面上的客户端交互。浏览器通过 API 向服务器发送请求以获取任何新内容或数据；只获取新所需的信息。

这项技术的优点是它节省时间，减少加载时间，并提高 SEO 排名，因为它通过比传统的客户端渲染更快的速度显示内容来提供更好的用户体验。

React 服务端渲染概述

可以使用 ReactDOMServer.renderToString 方法在 React 中实现服务端渲染，然后将字符串从 Node.js HTTP 服务器返回到浏览器。

ReactDOMServer 用于服务端渲染，这意味着它会将您的组件渲染到 HTML 字符串中，然后将其发送回客户端，而不是仅仅将其作为对象或对象数组返回。

renderToString 方法将您的整个应用程序渲染成单个 HTML 字符串，包括您初始化应用程序所需的所有数据，例如 API 响应或初始状态变量，这非常完美，因为您可以在任何地方使用此字符串：在服务器上；在静态网站生成器中；甚至在其他项目中！

简而言之，React 的服务端渲染是服务器在将网页传输到浏览器之前将其转换为可查看布局的过程。因此，动态组件可以作为静态 HTML 标记提供服务。

当索引无法正确处理 JavaScript 时，这种方法可能对搜索引擎优化 (SEO) 有所帮助。当下载大型 JavaScript 包受缓慢的网络影响时，它也可能很有用。

React 服务端渲染的优势

最初，服务端渲染意味着每个页面都在服务器上渲染和加载。自从引入服务端（通用）React 以来，情况略有变化。因为第一页是从服务器渲染的，所以后续页面直接从客户端加载。

因此，您可以同时获得两全其美：初始服务端内容的强大功能以及仅请求未来请求所需内容的后续加载速度。

React 服务端渲染的一个重要优势是能够提高应用程序性能。但是，它远非服务端渲染的唯一优势。现在让我们了解 React 集成服务端渲染可以为您的应用程序提供的全部优势。

内容分发

当社交网络用户在帖子中分享指向服务端渲染应用程序的链接时，图像和标题会自动生成。因此，社交网络片段可以帮助您吸引人们对应用程序内容的关注并增加流量。

性能提升和用户满意度

当渲染客户端应用程序时，应用程序的 JavaScript 文件会在应用程序页面开始加载之前下载到客户端浏览器。由于 JavaScript 文件通常很大，这会大大增加初始页面加载时间。您还可以将服务端渲染包含在您的 React 应用程序中。

React 的服务端渲染无需在加载页面之前下载 JavaScript 文件。客户端浏览器会立即显示完全渲染的 HTML 文件，无需客户端渲染。

如果您的应用程序使用服务端渲染，您的网站访问者无需等待应用程序内容加载，而一直盯着无尽的旋转器或加载器。

准确的页面加载指标

在客户端渲染应用程序会阻止服务器获取有关客户端获取网站内容速度的信息。

当在客户端渲染应用程序时，您不知道客户端查看应用程序内容需要多长时间。因此，您将不知道速度是否足够快，或者是否有改进的空间。

搜索引擎友好性

较长的初始加载时间不仅对用户来说是个问题。您的用户可能有足够的耐心等待页面加载，但 Google 机器人不会。

这些机器人擅长索引静态 HTML 页面，并且速度很快。使用 JavaScript 索引页面则不能这么说。与网站访问者一样，机器人必须等待下载 JavaScript 文件才能显示页面内容。但是，机器人在一个页面上花费的时间是固定的。如果您的网站没有及时加载，机器人将不会对其进行索引，因此也不会对其进行排名。

决定服务端渲染性能的参数？

在使用 React 服务端渲染获得更好性能时，必须考虑以下三个重要参数 -

• TTFB（第一个字节时间）- 点击链接和接收第一位内容之间的时间。

• FCP（首次内容绘制）- 呈现请求内容的点。

• TTI（交互时间）- 页面变得可交互的点。

由于完全渲染的 HTML 页面被传输到浏览器，因此 TTFB 可能更高，但 FCP 明显更快，从而提高了性能和用户体验。

渲染网页所需的脚本数量及其复杂性都会影响 TTI。当在服务器端渲染时，由于其适度的交互性，大多数页面的 TTI 较低。

SSR 的 SEO 和性能

我们现在了解 SEO 对增加网站流量的重要性。除 Google 外，大多数搜索引擎现在都无法在索引之前渲染内容。客户端渲染是一个即使 Google 也在努力解决的问题。

使用服务端渲染时，初始响应中存在 SEO 所需的所有元素。此外，由于浏览器优先处理快速加载的页面，因此服务端生成的网页索引更准确。

简而言之，如果您的网站在服务器上渲染，它在搜索结果中的排名会更高。在社交媒体平台上，链接到使用服务端渲染的网站更适合于充分表示网站的标题和缩略图。

总结

随着世界变化，我们必须跟上快速的技术变化。React 的服务端渲染是渲染网页以提高初始页面加载速度、内容分发、SEO 和用户体验的绝佳选择。

React 服务端渲染最好的方面是平台和框架的可用性，它们使复杂的概念更容易实现。