React 中的服务器端渲染指南
服务器端渲染已经存在一段时间了。它最早在 21 世纪初被引入，从那时起就被许多网站使用。
这项技术背后的理念是在服务器上预渲染 HTML 页面，并在客户端请求时将其发送回浏览器。
使用服务器端渲染 (SSR)，页面会在服务器上渲染。这确保了页面在浏览器加载之前就已经可供用户使用。
我们将在本文中了解更多关于 SSR 的信息 -
服务器端渲染 (SSR) 的工作原理?
这是在将网页发送到浏览器之前在服务器上渲染网页的过程。因此，当服务器返回一个可立即渲染的 HTML 页面和必要的 JS 脚本时，所有静态元素都会立即在 HTML 中渲染。
与此同时，浏览器下载并执行 JS 代码，从而使页面变得可交互。现在，浏览器负责处理此页面上的客户端交互。浏览器通过 API 向服务器发送请求，以获取任何新内容或数据;仅获取新需要的信息。
这种技术的优点在于它节省时间、减少加载时间并提高 SEO 排名，因为它通过比传统客户端渲染更快地显示内容来提供更好的用户体验。
React 中的服务器端渲染概述
在 React 中，可以使用 ReactDOMServer.renderToString 方法进行服务器端渲染，然后将字符串从 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 较低。
SEO 与服务器端渲染 (SSR) 的性能
我们现在明白了 SEO 对于提升网站流量的重要性。除了谷歌之外，大多数搜索引擎现在都无法在索引前渲染内容。客户端渲染是谷歌也面临的一个问题。
使用服务器端渲染时，SEO 所需的所有元素都会出现在初始响应中。此外，由于浏览器优先加载快速的页面，服务器端生成的网页更容易被索引。
简而言之，如果您的网站在服务器上渲染，它将在搜索结果中排名更高。在社交媒体平台上，链接到使用服务器端渲染的网站更有利于充分展现网站的标题和缩略图。
总结
随着世界的变化，我们必须跟上快速的技术变革。React 中的服务器端渲染是渲染网页的绝佳选择，可以提升初始页面加载速度、内容分发、SEO 和用户体验。
React 中服务器端渲染的最大优势在于，它拥有可用的平台和框架，使复杂的概念更容易实现。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
