现在公司大部分前端项目都切换到 React 了,社区、论坛类,电商商品详情页都有 SEO 需求,然鹅 SPA 应用 SEO 确实是个麻烦事,经过前期实践后总结出我们的 SEO 方案。可以看看下文,欢迎感兴趣的小伙伴讨论下~
PS:安利下公司的一个任务管理神器,TaskHub 文件式任务管理
1 Lax 2020-08-03 16:23:55 +08:00 ![]() 点链接进去超过 10 秒了还是白屏。广告就应该有个广告的亚子 |
![]() | 3 throns 2020-08-03 16:50:27 +08:00 线上环境没关 Redux DevTools?  |
![]() | 5 throns 2020-08-03 17:40:41 +08:00 另外, [登陆] 用得不对吧,正常应该使用 [登录] 讨论: https://www.zhihu.com/question/19570377 |
![]() | 6 robinlovemaggie 2020-08-03 18:02:50 +08:00 @zhdsuperm 先不着急关哈,让我们一窥究竟~ |
7 phpfpm 2020-08-03 18:06:25 +08:00 这又是从 ssr 到 case study 的示范么 |
![]() | 8 keepeye 2020-08-03 18:10:10 +08:00 要 seo 的干啥要做成 spa ? |
9 iXingo 2020-08-03 19:43:05 +08:00 图用什么画的 |
10 airfling 2020-08-03 19:48:40 +08:00 第一次打开确实是需要十秒左右 |
![]() | 11 zhdsuperm OP |
![]() | 12 zhdsuperm OP |
![]() | 13 gitJavascript 2020-08-03 23:15:09 +08:00 我打开挺快的 |
![]() | 14 dartabe 2020-08-04 03:40:08 +08:00 有点收获 但是我觉得应该是 ssr 和 csr 混合吧 不是什么 spa |
15 zqx 2020-08-04 07:55:34 +08:00 via Android 所以结论是 nginx 判断 ua,是爬虫就代理到 node 服务,是人就返回静态资源 但是 ssr 还有个优点是内容到达时间更短,首屏渲染快,人就享受不到了 |
![]() | 16 yeept 2020-08-04 08:05:32 +08:00 10 多秒还没打开呢。 |
17 crazyrock 2020-08-04 08:36:17 +08:00 关掉翻墙,秒开,赞 |
![]() | 18 ddzy 2020-08-04 09:18:29 +08:00 不支持 Markdown? |
19 ljpCN 2020-08-04 09:32:03 +08:00 via Android 打听一下,Gatsby 是不是类似构建时渲染? |
![]() | 20 maichael 2020-08-04 09:32:14 +08:00 sourcemap 不去掉? |
![]() | 21 robinlovemaggie 2020-08-04 09:39:52 +08:00 @zhdsuperm 前端源码写的蛮不错的(真赞),就是部署这个 npm run dev 模式有点裸奔的味道~ |
22 yrj 2020-08-04 10:08:44 +08:00 via iPad 看了文章,动态渲染确实是性能消耗最小的。但我有几点疑问:你只问了谷歌,其他搜索引擎是否会判定作弊未知。渲染页面的方式为什么不用框架自身的 ssr 机制,性能上会不会更好一些。 |
![]() | 23 jziwenchen 2020-08-04 10:12:09 +08:00 服务器渲染不可以吗? |
![]() | 24 robinlovemaggie 2020-08-04 10:24:17 +08:00 ![]() @ljpCN #19 这也许是你想要的渲染原理: https://www.gatsbyjs.org/docs/gatsby-internals/ |
![]() | 26 zhdsuperm OP @robinlovemaggie 不是 dev 哦 是 react 脚手架默认就是开启 sourcemap 要自己关一下 唉:-( 丢人丢到家了 以前这个项目前端是我写的 用的 react 老版本 后来让小伙伴升级新版本 代码搬了过去 为了调试方便他们都裸奔搞的 :-( 唉 |
![]() | 27 zhdsuperm OP @jziwenchen @yrj 其实这个就是改良版的服务端渲染,不过只渲染给爬虫看,如果你想首页渲染优化,用文章里面的 puppeteer 配合 nginx 也是可以做的 api 丰富。主要是这个方案代码改动最小,插件一样存在,随时插拔。至于其他搜索引擎会不会判断为作弊行为的问题,动态渲染方案其实不是新东西,出来很久了,百度这边我们没有发现有问题,自己不作弊就行了 |