对vue服务端渲染的理解以及其使用场景

理解

• 本质上，服务端渲染其实是生成了应用程序的“快照”，将vue及其对应的库运行在服务端，令其去访问接口去预加载数据，然后将获取到的数据作为组件的初始状态
• 首先拉取数据，此后，组件的beforeCreate和created生命周期会在服务端调用，初始化完成后将生成的html字符串交由客户端浏览器托管，继续进行挂载，从而实现前后端同构

优点

• 由于搜索引擎爬虫抓取工具可以直接查看到已经完全渲染了的页面，所以可以达到更好的 SEO
• 可以具备更快的首屏内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备比如弱网络下的移动端来说极为友好

缺点

• 复杂度较高，浏览器特定的代码，只能在某些生命周期钩子函数中使用，一些外部扩展库可能需要特殊处理，才能在服务器渲染应用程序中运行
• 性能方面有较大问题，每一个请求都对应着多个新的实例的创建，就导致了对服务端资源的占用较大
  • 解决方案1 多级别缓存
    • node server ：通过协商的用户过期期限，去判断是否重新渲染页面
    • nginx：通过标记等判断页面是否过期，从而决定是否让node server重新渲染页面
  • 解决方案2 降级
    • 当服务器的cpu、内存等达到某一界线时，可以直接变成spa版本而不是服务端渲染
• 与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于 Node.js server 运行环境

场景

• seo
  • 在只是企业官网或者只有几个页面需要做seo这种情况下，可以用预渲染pre-render来对这几个页面做单独的处理，也就达到了seo的目的
  • 已经存在的项目，想要去修改服务端渲染有点不大可行，可以通过User Agent 判断请求来源，如果是搜索引擎的爬虫利用爬虫工具如Puppeteer去获取spa生成html返回给客户端，做一个模拟的服务端渲染，如果是正常用户就还是通过spa的方式
  • 全新项目可以运用更加完善的工具框架去实现服务端渲染，如nuxt.js去搭建项目完成项目