V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhdsuperm
V2EX  ›  React

分享一个 SPA 应用(React)的 SEO 方案

  •  
  •   zhdsuperm · 2020-08-03 16:17:12 +08:00 · 4376 次点击
    这是一个创建于 1359 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    27 条回复    2020-08-04 20:47:46 +08:00
    Lax
        1
    Lax  
       2020-08-03 16:23:55 +08:00   ❤️ 1
    点链接进去超过 10 秒了还是白屏。广告就应该有个广告的亚子
    zhdsuperm
        2
    zhdsuperm  
    OP
       2020-08-03 16:29:49 +08:00
    @Lax 兄弟是不是你翻墙啦~ 这个应用国外 IP 访问还没有优化呢~
    throns
        3
    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
        4
    zhdsuperm  
    OP
       2020-08-03 17:16:14 +08:00
    @throns ⊙﹏⊙b 汗。。。前端同事。。。╮(╯▽╰)╭
    throns
        5
    throns  
       2020-08-03 17:40:41 +08:00
    另外, [登陆] 用得不对吧,正常应该使用 [登录] 讨论: https://www.zhihu.com/question/19570377
    robinlovemaggie
        6
    robinlovemaggie  
       2020-08-03 18:02:50 +08:00
    @zhdsuperm 先不着急关哈,让我们一窥究竟~
    phpfpm
        7
    phpfpm  
       2020-08-03 18:06:25 +08:00
    这又是从 ssr 到 case study 的示范么
    keepeye
        8
    keepeye  
       2020-08-03 18:10:10 +08:00
    要 seo 的干啥要做成 spa ?
    iXingo
        9
    iXingo  
       2020-08-03 19:43:05 +08:00
    图用什么画的
    airfling
        10
    airfling  
       2020-08-03 19:48:40 +08:00
    第一次打开确实是需要十秒左右
    zhdsuperm
        11
    zhdsuperm  
    OP
       2020-08-03 22:42:42 +08:00
    @keepeye SPA 有明显的体验差距,用户体验有限,其次 SEO 都是做给爬虫看的,普通用户用不到其实,所以文章写了动态渲染的方案。
    @iXingo 前几张用的网图,后面架构图片用的 google sheet ( PPT )画的,我们用谷歌文档协作
    zhdsuperm
        12
    zhdsuperm  
    OP
       2020-08-03 22:44:56 +08:00
    @airfling @robinlovemaggie @throns 让你们见笑了,应该是前端同学调试发版本的时候忘了。。。CDN 也没刷新预热。
    感谢你们的意见,我们会吸收改进!
    gitjavascript
        13
    gitjavascript  
       2020-08-03 23:15:09 +08:00
    我打开挺快的
    dartabe
        14
    dartabe  
       2020-08-04 03:40:08 +08:00
    有点收获 但是我觉得应该是 ssr 和 csr 混合吧 不是什么 spa
    zqx
        15
    zqx  
       2020-08-04 07:55:34 +08:00 via Android
    所以结论是 nginx 判断 ua,是爬虫就代理到 node 服务,是人就返回静态资源
    但是 ssr 还有个优点是内容到达时间更短,首屏渲染快,人就享受不到了
    yeept
        16
    yeept  
       2020-08-04 08:05:32 +08:00
    10 多秒还没打开呢。
    crazyrock
        17
    crazyrock  
       2020-08-04 08:36:17 +08:00
    关掉翻墙,秒开,赞
    ddzy
        18
    ddzy  
       2020-08-04 09:18:29 +08:00
    不支持 Markdown?
    ljpCN
        19
    ljpCN  
       2020-08-04 09:32:03 +08:00 via Android
    打听一下,Gatsby 是不是类似构建时渲染?
    maichael
        20
    maichael  
       2020-08-04 09:32:14 +08:00
    sourcemap 不去掉?
    robinlovemaggie
        21
    robinlovemaggie  
       2020-08-04 09:39:52 +08:00
    @zhdsuperm 前端源码写的蛮不错的(真❤️赞),就是部署这个 npm run dev 模式有点裸奔的味道~
    yrj
        22
    yrj  
       2020-08-04 10:08:44 +08:00 via iPad
    看了文章,动态渲染确实是性能消耗最小的。但我有几点疑问:你只问了谷歌,其他搜索引擎是否会判定作弊未知。渲染页面的方式为什么不用框架自身的 ssr 机制,性能上会不会更好一些。
    jziwenchen
        23
    jziwenchen  
       2020-08-04 10:12:09 +08:00
    服务器渲染不可以吗?
    robinlovemaggie
        24
    robinlovemaggie  
       2020-08-04 10:24:17 +08:00   ❤️ 1
    @ljpCN #19 这也许是你想要的渲染原理: https://www.gatsbyjs.org/docs/gatsby-internals/
    zhdsuperm
        25
    zhdsuperm  
    OP
       2020-08-04 16:26:13 +08:00 via Android
    @crazyrock cdn 我们买了阿里云的全球加速 但是国外访问还是不理想
    zhdsuperm
        26
    zhdsuperm  
    OP
       2020-08-04 16:52:45 +08:00 via Android
    @robinlovemaggie 不是 dev 哦 是 react 脚手架默认就是开启 sourcemap 要自己关一下 唉:-( 丢人丢到家了 以前这个项目前端是我写的 用的 react 老版本 后来让小伙伴升级新版本 代码搬了过去 为了调试方便他们都裸奔搞的 :-( 唉
    zhdsuperm
        27
    zhdsuperm  
    OP
       2020-08-04 20:47:46 +08:00
    @jziwenchen @yrj 其实这个就是改良版的服务端渲染,不过只渲染给爬虫看,如果你想首页渲染优化,用文章里面的 puppeteer 配合 nginx 也是可以做的 api 丰富。主要是这个方案代码改动最小,插件一样存在,随时插拔。至于其他搜索引擎会不会判断为作弊行为的问题,动态渲染方案其实不是新东西,出来很久了,百度这边我们没有发现有问题,自己不作弊就行了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5341 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 07:13 · PVG 15:13 · LAX 00:13 · JFK 03:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.