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

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

  •  
  •   zhdsuperm · 84 天前 · 2185 次点击
    这是一个创建于 84 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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