服务端渲染基础

SPA单页应用：

1. 优点：
   • 用户体验好；
   • 开发效率高
   • 渲染性能好
   • 可维护性好
2. 缺点：
   • 首屏渲染时间长
   • 不利于SEO

服务端渲染

1. 什么是渲染：
   • 把【数据】+【模板】拼接到一起

     {msg: 'Hello World'}
     <h1>{{ msg }}</h1>
     
     // 上面可以渲染为：
     <h1>Hello World</h1>
     

2. 服务端渲染流程
   • 服务端将准备好的模板和数据组装成完整的HTML返回给浏览器展示
   • 早起的WEB页面渲染都是在服务端完成的
     
3. 服务端渲染的有点
   • 响应快；用户体验好；
   • 有利于SEO；
4. 服务端渲染缺点：
   • 前后端代码完全耦合在一起，不利于开发和维护
   • 前端没有足够的发挥空间
   • 服务端压力比较大
   • 用户体验一般

客户端渲染

1. 客户端渲染的流程：
   
2. 客户端渲染的有点
   • 分工明确；前端做视图与交互，后台提供数据；
   • 服务器计算压力减轻
3. 客户端渲染的不足：
   • 首屏渲染慢（在网络慢的情况下，客户端渲染明显慢与服务端渲染，客户端渲染会涉及到页面，js及数据忌口的请求）
   • 不利于SEO

同构渲染

• 同构渲染 = 后端渲染 + 前端渲染
  • 基于React，Vue等框架，客户端渲染和服务端渲染的结合
    • 在服务端执行一次，用于实现服务端渲染（首屏直出）
    • 在客户端再执行一次，用于接管页面交互
  • 核心解决SEO和首屏渲染慢的问题
    • 通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题；
    • 通过客户端渲染页面接管页面内容交互得到更好的用户体验
  • 用有传统服务端渲染的优点，也有客户端渲染的优点
    
• 如何实现同构渲染
  • 1）使用React， Vue等框架的官方解决方案
    • 优点： 有助于理解原理
    • 缺点：需要搭建环境， 比较麻烦
  • 2）使用第三方解决方案：
    • React生态的Next.js
    • Vue生态的Nuxt.js
• 同构渲染的问题：

  1. 开发条件所限

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

  2. 涉及构建设置和部署的更多要求

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

  3. 更多的服务器

     • 在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器，需要占用CPU资源
     • 如果应用在高流量环境下使用，需要准备相应的服务器负载
     • 需要更多的服务端渲染优化工作处理
• 服务端渲染使用建议
  • 首屏渲染速度是否真的重要
  • 是否真的需求SEO

VueSSR

vue-cli3.0搭建服务端渲染SSR