为什么客户端渲染不利于 SEO

  1. 「客户端渲染」网页内容是空的，内容通过解析执行 js 脚本才能渲染出来网页内容；

  2. 「服务端渲染」可以清晰的看到页面的内容，根据内容可以更有利于搜索；

为什么客户端渲染首屏渲染慢

  1. 服务端渲染，发现服务端渲染请求很简单 html 直出，浏览器加载到文档就可以开始渲染；

  2. 而客户端渲染，至少要经历三次 http 请求周期：

    • 第一次是页面的请求；
    • 第二次是 js 对应的请求；
    • 第三次动态数据的请求；

现代化的服务端渲染

也叫「同构渲染」，所谓的同构指的就是 服务端构建渲染 + 客户端构建渲染：

  1. 客户端发起请求；

  2. 服务端渲染首屏内容 + 生成客户端 SPA 相关资源；

  3. 服务端将生成的首屏资源发送给客户端；

  4. 客户端直接展示服务端渲染好的首屏内容；

  5. 首屏中的 SPA 相关资源执行之后会激活客户端应用；

  6. 之后客户端所有的交互都由客户端 SPA 处理；

同构渲染应用的问题

  1. 开发条件有限；

    • 浏览器特定的代码只能在某些生命周期钩子函数中使用；
    • 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行；
    • 不能在服务端渲染期间操作 DOM；
    • 某些代码操作需要区分运行环境；
    • …

  2. 设计构建设置和部署的更多要求；

    • 客户端渲染：仅构建客户端即可，可以部署在任意 web 服务器中；
    • 同构渲染：需要构建两个端，只能部署在 Node.js Server；

  3. 更多的服务器端负载：

    • 在 Node 中渲染完整的应用程序，相比仅仅提供静态文件的服务器需要大量 CPU 资源；
    • SSR 占用更多的 CPU 和内存资源，如果应用在高流量环境下使用，需要准备相应的服务器负载；
    • 需要更多的服务端渲染优化工作处理；

  4. …

服务端渲染使用建议

  1. 首屏渲染速度是否真的重要；

  2. 是否真的需要 SEO；

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 为什么客户端渲染不利于 SEO
  2. 2. 为什么客户端渲染首屏渲染慢
  3. 3. 现代化的服务端渲染
  4. 4. 同构渲染应用的问题
  5. 5. 服务端渲染使用建议