分享一个 SPA 应用（React）的 SEO 方案

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1607 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在公司大部分前端项目都切换到 React 了，社区、论坛类，电商商品详情页都有 SEO 需求，然鹅 SPA 应用 SEO 确实是个麻烦事，经过前期实践后总结出我们的 SEO 方案。可以看看下文，欢迎感兴趣的小伙伴讨论下～

SPA 的 SEO 方案对比、最终实践

PS：安利下公司的一个任务管理神器，TaskHub 文件式任务管理

27 条回复 • 2020-08-04 20:47:46 +08:00

Lax

2020-08-03 16:23:55 +08:00

点链接进去超过 10 秒了还是白屏。广告就应该有个广告的亚子

zhdsuperm

2020-08-03 16:29:49 +08:00

@Lax 兄弟是不是你翻墙啦～这个应用国外 IP 访问还没有优化呢～

throns

2020-08-03 16:50:27 +08:00

线上环境没关 Redux DevTools?
![Snipaste_2020-08-03_16-48-06.png]( https://i.loli.net/2020/08/03/cn9J4U3XmNuyhpY.png)

zhdsuperm

2020-08-03 17:16:14 +08:00

@throns ⊙﹏⊙b 汗。。。前端同事。。。╮(╯▽╰)╭

throns

2020-08-03 17:40:41 +08:00

另外， [登陆] 用得不对吧，正常应该使用 [登录] 讨论： https://www.zhihu.com/question/19570377

robinlovemaggie

2020-08-03 18:02:50 +08:00

@zhdsuperm 先不着急关哈，让我们一窥究竟～

phpfpm

2020-08-03 18:06:25 +08:00

这又是从 ssr 到 case study 的示范么

keepeye

2020-08-03 18:10:10 +08:00

要 seo 的干啥要做成 spa ？

iXingo

2020-08-03 19:43:05 +08:00

图用什么画的

airfling

2020-08-03 19:48:40 +08:00

第一次打开确实是需要十秒左右

zhdsuperm

2020-08-03 22:42:42 +08:00

@keepeye SPA 有明显的体验差距，用户体验有限，其次 SEO 都是做给爬虫看的，普通用户用不到其实，所以文章写了动态渲染的方案。
@iXingo 前几张用的网图，后面架构图片用的 google sheet （ PPT ）画的，我们用谷歌文档协作

zhdsuperm

2020-08-03 22:44:56 +08:00

@airfling @robinlovemaggie @throns 让你们见笑了，应该是前端同学调试发版本的时候忘了。。。CDN 也没刷新预热。
感谢你们的意见，我们会吸收改进！

gitjavascript

2020-08-03 23:15:09 +08:00

我打开挺快的

dartabe

2020-08-04 03:40:08 +08:00

有点收获但是我觉得应该是 ssr 和 csr 混合吧不是什么 spa

zqx

2020-08-04 07:55:34 +08:00 via Android

所以结论是 nginx 判断 ua，是爬虫就代理到 node 服务，是人就返回静态资源
但是 ssr 还有个优点是内容到达时间更短，首屏渲染快，人就享受不到了

yeept

2020-08-04 08:05:32 +08:00

10 多秒还没打开呢。

crazyrock

2020-08-04 08:36:17 +08:00

关掉翻墙，秒开，赞

ddzy

2020-08-04 09:18:29 +08:00

不支持 Markdown?

ljpCN

2020-08-04 09:32:03 +08:00 via Android

打听一下，Gatsby 是不是类似构建时渲染？

maichael

2020-08-04 09:32:14 +08:00

sourcemap 不去掉？

robinlovemaggie

2020-08-04 09:39:52 +08:00

@zhdsuperm 前端源码写的蛮不错的（真❤️赞），就是部署这个 npm run dev 模式有点裸奔的味道～

yrj

2020-08-04 10:08:44 +08:00 via iPad

看了文章，动态渲染确实是性能消耗最小的。但我有几点疑问：你只问了谷歌，其他搜索引擎是否会判定作弊未知。渲染页面的方式为什么不用框架自身的 ssr 机制，性能上会不会更好一些。

jziwenchen

2020-08-04 10:12:09 +08:00

服务器渲染不可以吗？

robinlovemaggie

2020-08-04 10:24:17 +08:00

@ljpCN #19 这也许是你想要的渲染原理： https://www.gatsbyjs.org/docs/gatsby-internals/

zhdsuperm

2020-08-04 16:26:13 +08:00 via Android

@crazyrock cdn 我们买了阿里云的全球加速但是国外访问还是不理想

zhdsuperm

2020-08-04 16:52:45 +08:00 via Android

@robinlovemaggie 不是 dev 哦是 react 脚手架默认就是开启 sourcemap 要自己关一下唉:-( 丢人丢到家了以前这个项目前端是我写的用的 react 老版本后来让小伙伴升级新版本代码搬了过去为了调试方便他们都裸奔搞的 :-( 唉

zhdsuperm

2020-08-04 20:47:46 +08:00

@jziwenchen @yrj 其实这个就是改良版的服务端渲染，不过只渲染给爬虫看，如果你想首页渲染优化，用文章里面的 puppeteer 配合 nginx 也是可以做的 api 丰富。主要是这个方案代码改动最小，插件一样存在，随时插拔。至于其他搜索引擎会不会判断为作弊行为的问题，动态渲染方案其实不是新东西，出来很久了，百度这边我们没有发现有问题，自己不作弊就行了