这两种服务 React App 的方式有什么区别？
What is the difference between these two ways of serving React App?
我想从 nodejs 服务器提供一个反应项目。我遇到了两种做法：
第一种方法是使用 express 为构建文件夹提供任何请求：
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 的最佳方法是什么？何时选择其中一种？
谢谢！！！
React 默认在客户端渲染。然而，大多数搜索引擎机器人无法读取 JavaScript。因此，使用服务器端渲染对 SEO 更好，因为它会在服务器上生成静态 HTML 文件，然后将其提供给客户端。
另一个区别是客户端渲染在第一次加载时需要更长的时间，但所有连续的渲染速度都会更快（如果客户端没有禁用缓存）。服务器端呈现的网站每次在服务器上加载时都必须呈现页面。使其平均速度稍微慢一些，但会提供一致的加载速度和更快的首次加载速度，这对于商业着陆页来说很重要。
企业社会责任
第一种方法，您只需提供 build 文件夹并将所有请求定向到 index.html，这是单页应用程序 (SPA) 工作方式的默认方式。这种方法称为客户端呈现 (CSR)，这意味着客户端（浏览器）将负责通过执行应用程序的 javascript 代码来准备网站的所有内容，然后从 API（新闻、帖子、个人资料等），最后构建页面布局并在屏幕上显示所有内容。
SSR
反过来，使用您提到的第二种方法，服务器准备（呈现）整个文档（HTML）和内容并将其发送给客户端需要显示它。这称为服务器端呈现 (SSR)，在您的情况下，ReactDOMServer 负责。但是，由于您希望您的应用程序具有交互性，因此您需要使用 javascript（在我们的示例中使用 React）“恢复”它，而这正是 ReactDOM.hydrate 的实际作用。它将所有必要的事件侦听器附加到现有标记，并使页面的行为方式与在客户端（默认 CSR）上完全呈现时的行为方式相同。
SEO
普遍认为使用 CSR 会对 SEO 产生不良影响，因为爬行网站的机器人需要执行额外的步骤（执行 javascript），这会减慢流程并降低效率，而且，并非所有机器人都可以 运行 javascript。
然而，现在现代爬虫（例如Google）可以很好地应对SPA，但最终结果可能不如SSR。
如果你正处于项目开发初期，SEO对你来说确实是一个非常高的优先级，那么你应该选择SSR。
但是，与其使用 ReactDOMServer 和 hydrate 自己实现所有内容，我建议您看一下 Next.js - React 功能强大且易于学习框架。
P.S.
SSG
您还应该了解静态站点生成 (SSG) 方法，在该方法中，您的应用程序的每个页面都会在构建阶段进行预呈现，从而生成一堆 HTML 文件和站点的其他资产。然后，所有这些静态文件都由一个简单的托管 and/or CDN 提供。这种方法的主要好处是：非常高的页面加载速度、出色的 SEO 以及通常非常低的维护成本。
但是，这种方法只适用于内容变化很少且页面不具有交互性的站点。当然，您可以将它与水合作用结合起来，但最终往往会导致非常棘手和错误的解决方案。
您可以阅读有关所有三种方法的更多详细信息here。
我想从 nodejs 服务器提供一个反应项目。我遇到了两种做法：
第一种方法是使用 express 为构建文件夹提供任何请求：
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 的最佳方法是什么？何时选择其中一种？
谢谢！！！
React 默认在客户端渲染。然而，大多数搜索引擎机器人无法读取 JavaScript。因此，使用服务器端渲染对 SEO 更好，因为它会在服务器上生成静态 HTML 文件，然后将其提供给客户端。
另一个区别是客户端渲染在第一次加载时需要更长的时间，但所有连续的渲染速度都会更快（如果客户端没有禁用缓存）。服务器端呈现的网站每次在服务器上加载时都必须呈现页面。使其平均速度稍微慢一些，但会提供一致的加载速度和更快的首次加载速度，这对于商业着陆页来说很重要。
企业社会责任
第一种方法，您只需提供 build 文件夹并将所有请求定向到 index.html，这是单页应用程序 (SPA) 工作方式的默认方式。这种方法称为客户端呈现 (CSR)，这意味着客户端（浏览器）将负责通过执行应用程序的 javascript 代码来准备网站的所有内容，然后从 API（新闻、帖子、个人资料等），最后构建页面布局并在屏幕上显示所有内容。
SSR
反过来，使用您提到的第二种方法，服务器准备（呈现）整个文档（HTML）和内容并将其发送给客户端需要显示它。这称为服务器端呈现 (SSR)，在您的情况下，ReactDOMServer 负责。但是，由于您希望您的应用程序具有交互性，因此您需要使用 javascript（在我们的示例中使用 React）“恢复”它，而这正是 ReactDOM.hydrate 的实际作用。它将所有必要的事件侦听器附加到现有标记，并使页面的行为方式与在客户端（默认 CSR）上完全呈现时的行为方式相同。
SEO
普遍认为使用 CSR 会对 SEO 产生不良影响，因为爬行网站的机器人需要执行额外的步骤（执行 javascript），这会减慢流程并降低效率，而且，并非所有机器人都可以 运行 javascript。 然而，现在现代爬虫（例如Google）可以很好地应对SPA，但最终结果可能不如SSR。 如果你正处于项目开发初期，SEO对你来说确实是一个非常高的优先级，那么你应该选择SSR。
但是，与其使用 ReactDOMServer 和 hydrate 自己实现所有内容，我建议您看一下 Next.js - React 功能强大且易于学习框架。
P.S.
SSG
您还应该了解静态站点生成 (SSG) 方法，在该方法中，您的应用程序的每个页面都会在构建阶段进行预呈现，从而生成一堆 HTML 文件和站点的其他资产。然后，所有这些静态文件都由一个简单的托管 and/or CDN 提供。这种方法的主要好处是：非常高的页面加载速度、出色的 SEO 以及通常非常低的维护成本。 但是，这种方法只适用于内容变化很少且页面不具有交互性的站点。当然，您可以将它与水合作用结合起来，但最终往往会导致非常棘手和错误的解决方案。
您可以阅读有关所有三种方法的更多详细信息here。