node.js - 这两种服务 React App 的方式有什么区别？

Question

我想从 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 的最佳方法是什么，何时选择一种方法？
谢谢!!!

Answer 1

企业社会责任
第一种方法，您只需提供 build文件夹并将所有请求定向到 index.html是单页应用程序 (SPA) 工作的默认方式。这种方法称为客户端渲染 (CSR)，这意味着客户端(浏览器)将负责通过执行应用程序的 javascript 代码来准备您网站的所有内容，然后从 API(新闻、帖子、个人资料、等)，最后，构建页面布局并在屏幕上显示所有内容。
SSR
反过来，使用您提到的第二种方法，服务器准备(呈现)包含内容的整个文档 (HTML) 并将其发送到只需要显示它的客户端。这称为服务器端渲染 (SSR)，在您的情况下是 ReactDOMServer对此负责。但是，由于您希望您的应用程序具有交互性，您需要使用 javascript(在我们的示例中使用 React)“恢复”它，这就是 ReactDOM.hydrate事实上。它将所有必要的事件监听器附加到现有标记，并使页面的行为方式与在客户端上完全呈现时的行为方式相同(默认 CSR)。
搜索引擎优化
普遍认为使用 CSR 对 SEO 有不良影响，因为爬取网站的机器人需要执行额外的步骤(执行 javascript)，这会减慢进程并降低效率，此外，并非所有机器人都可以在全部。
然而，现在现代爬虫(例如谷歌)可以很好地应对 SPA，但最终结果可能不如 SSR。
如果您处于项目开发的初期并且SEO对您来说确实是一个非常高的优先级，那么您应该选择SSR。
但是，与其使用 ReactDOMServer 自己实现所有内容，和 hydrate , 我建议你看看 Next.js - 功能强大且易于学习的 React 框架。
附言
SSG
您还应该了解静态站点生成 (SSG) 方法，其中应用程序的每个页面都在构建阶段进行预渲染，生成大量 HTML 文件和站点的其他 Assets 。然后，所有这些静态文件都来自一个简单的托管和/或 CDN。这种方法的主要好处是:页面加载速度非常快，搜索引擎优化和维护成本通常非常低。
但是，这种方法仅适用于内容很少更改且页面不具有交互性的站点。当然，您可以将它与水合作用结合起来，但最终通常会导致非常棘手和错误的解决方案。
您可以阅读有关所有三种方法的更多详细信息 here .