服务端渲染基础

SPA单页面应用

• 优点
  • 用户体验好、开发效率高、渲染性能好、可维护性好…
• 缺点
  • 首屏渲染时间长，不是服务端渲染好，是js在客户端生成html
  • 不利于seo，搜索引擎爬取html内容时，单页面的html没有内容，需要js解析完才能生成网页内容

同构应用

• 在服务端执行前端框架代码生成网页内容，返回给客户端，客户端只需负责展示
• 通过服务端渲染首屏直出，解决spa应用首屏渲染过慢以及不利于seo的问题
• 通过客服端渲染接管页面内容交互得到更好的用户体验
• 这种方式通常称之为现代化的服务端渲染，也叫同构渲染
• 这种方式构建的应用称之为服务端渲染应用或者是同构应用

渲染

• 把数据和模板拼接到一起，本质：字符换的解析替换

传统服务端渲染

• 网页复杂时带来的缺点
  • 前后端代码完全耦合在一起，不利于开发维护
  • 前端没有足有的发挥空间
  • 服务端压力大
  • 用户体验一般（访问每个页面都要刷新）

客户端渲染

• ajax使得客户端动态获取数据称为可能
• 后端负责处理数据接口
• 前端负责将接口数据渲染到页面中
• 前端更为独立，不在受后端限制
• 不足
  • 首屏渲染慢
  • 不利于seo

为什么客户端渲染慢（白屏）

• 至少需要三次http请求周期
  • 请求html
  • 请求js脚本
  • 请求数据
• 服务端渲染加载一次html即可

现代化服务端渲染

• 同构渲染 = 后端渲染 + 前端渲染
• 流程
  • 基于react、vue等框架，客户端渲染和服务端渲染的结合
    • 在服务端执行一次，用于实现服务端渲染
    • 在客户端再执行一次，用于接管页面
• 核心解决seo和首屏渲染慢的问题
• 拥有传统服务端渲染的有点，也有客户端渲染的优点

同构渲染应用的问题

• 开发条件所限
  • 浏览器特定的代码只能在某些生命周期钩子函数中使用
  • 一些外部扩招库可能需要特殊处理才能在服务端渲染应用中使用
  • 不能在服务渲染期间操作dom
  • …
  • 某些代码操作需要区分运行环境
• 涉及构建设置和部署的更多要求
  • 构建：客户端渲染仅构建客户端应用即可，同构渲染需要构建两个端
  • 部署：客户端可以部署到任意的Web服务器中，同构渲染只能部署在node.js Server
• 更多的服务器负载
  • 在node中渲染完整的应用程序，相比仅仅提供静态文件的服务器需要大量占用cpu资源
  • 如果应用在高流量环境下使用，需要准备相应的服务器负载
  • 需要更多的服务端渲染优化工作处理
  • …
• 服务端渲染使用建议
  • 首屏渲染速度是否真的重要
  • 是否真的需要SEO