两种React应用服务部署方式的区别？哪种可以获得更好的SEO效果？

SEO效果对比 #

第二种基于ReactDOMServer的服务端渲染（SSR）方案SEO效果远优于第一种静态托管CSR方案，核心原因如下：

• 第一种静态托管的CSR模式下，服务端仅返回空白HTML骨架，所有页面内容需要等待客户端下载、执行JS完成后才会渲染。目前除少数头部搜索引擎支持有限度的JS执行爬取外，绝大多数搜索引擎爬虫、社交媒体分享爬虫都不会执行JS，无法抓取到实际页面内容，SEO表现极差。
• 第二种SSR模式下，服务端会直接将React组件渲染为带完整内容的HTML字符串返回给请求方，爬虫无需执行JS就能直接获取到页面的完整文本、链接等内容，完全符合搜索引擎收录规则，SEO表现优秀。

两种方案的适用场景 #

第一种：express静态托管build产物（CSR方案） #

实现代码如下：

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;

适用场景：

• 不需要搜索引擎收录的内部系统，如企业内部管理后台、OA系统、员工工具类应用
• 开发资源有限、项目交付周期短的项目，该方案无需修改现有React项目代码，打包后直接托管即可，开发、运维成本极低
• 交互逻辑极复杂、大量操作依赖客户端运行时的工具类应用，如在线设计工具、代码编辑器等

第二种：基于ReactDOMServer的SSR方案 #

适用场景：

• 面向公网用户、需要依赖搜索引擎引流的内容类项目，如官方网站、资讯平台、电商站点、个人博客等
• 对首屏加载体验要求高的C端应用，SSR返回的HTML可直接被浏览器渲染，用户无需等待JS加载完成就能看到完整内容，首屏跳转速度远快于CSR方案

内容的提问来源于stack exchange，提问作者Yashwanth Kambala