这两种服务 React App 的方式有什么区别？答案

【问题标题】：What is the difference between these two ways of serving React App?这两种服务 React App 的方式有什么区别？
【发布时间】：2021-10-30 01:52:57
【问题描述】：

我想从 nodejs 服务器提供一个 react 项目。我遇到了两种方法：

第一种方法是使用 express 为 req 生成的任何内容提供构建文件夹：

const express = require('express')
const app = express()
const path = require('path')

app.use(express.static(path.join(__dirname,'build')))

app.get('*',function(req,res){
    res.sendFile(path.join(__dirname,'build','index.html'))
})
module.exports = app;

第二种方式是使用ReactDOM.hydrate 和ReactDOMServer.renderToString 为应用程序提供服务。它被描述为here。

从上述方法中获得良好 SEO 的最佳方法是什么？何时选择其中一种？

谢谢！！！

【问题讨论】：

标签： node.js reactjs seo server-side-rendering

【解决方案1】：

React 默认在客户端渲染。然而，大多数搜索引擎机器人无法读取 JavaScript。因此，使用服务器端渲染更适合 SEO，因为它会在服务器上生成一个静态 HTML 文件，然后将其提供给客户端。

另一个区别是客户端渲染第一次加载需要更长的时间，但所有连续的时间它会渲染得更快（如果客户端没有禁用缓存）。服务器端呈现的网站每次在服务器上加载时都必须呈现页面。使其平均速度稍慢，但会提供一致的加载速度和更快的首次加载速度，这对于作为示例的业务着陆页很重要。

【讨论】：

【解决方案2】：

企业社会责任

第一种方法，您只需提供 build 文件夹并将所有请求定向到 index.html 是单页应用程序 (SPA) 工作方式的默认方式。这种方法称为客户端渲染 (CSR)，这意味着客户端（浏览器）将负责通过执行应用程序的 javascript 代码来准备网站的所有内容，然后从 API（新闻、帖子、个人资料、等），最后，构建页面布局并在屏幕上显示所有内容。

SSR

反过来，使用您提到的第二种方法，服务器准备（渲染）带有内容的整个文档（HTML）并将其发送给只需要显示它的客户端。这称为服务器端渲染 (SSR)，在您的情况下，ReactDOMServer 负责。但是，由于您希望您的应用程序具有交互性，因此您需要使用 javascript（在我们的示例中使用 React）“恢复”它，而这正是 ReactDOM.hydrate 实际所做的。它将所有必要的事件侦听器附加到现有标记，并使页面的行为方式与在客户端上完全呈现时的行为方式相同（默认 CSR）。

搜索引擎优化

普遍认为使用 CSR 对 SEO 有不良影响，因为爬取网站的机器人需要执行额外的步骤（执行 javascript），这会减慢过程并降低效率，此外，并非所有机器人都可以完全运行javascript。然而，如今，现代爬虫（例如 Google）可以很好地应对 SPA，但最终结果可能不如 SSR。如果您处于项目开发的初期，并且 SEO 对您来说确实是一个非常重要的优先事项，那么您应该选择 SSR。

但是，与其用 ReactDOMServer 和 hydrate 自己实现所有东西，我建议你看看 Next.js - 它功能强大且易于学习的 React 框架。

附言

SSG

您还应该了解静态站点生成 (SSG) 方法，在这种方法中，您的应用程序的每个页面都会在构建阶段进行预渲染，从而生成大量 HTML 文件和站点的其他资产。然后，所有这些静态文件都从一个简单的托管和/或 CDN 提供。这种方法的主要好处是：页面加载速度非常快，搜索引擎优化和通常非常低的维护成本。但是，这种方法仅适用于内容很少更改且页面不具有交互性的站点。当然，您可以将它与补水结合使用，但最终往往会导致非常棘手和错误的解决方案。

您可以阅读有关所有三种方法的更多详细信息here。

【讨论】：