服务端渲染一之相关概念

最近在学习服务端渲染相关的知识，本文中主要整理了服务端渲染相关的概念，让大家对服务端渲染及其发展有了一定程序的了解：

spa单页面应用

• 优点

  1. 用户体验好
  2. 开发效率高
  3. 渲染性能好
  4. 可维护性好

• 缺点

  1. 首屏渲染时间长
  2. 不利于seo

同构应用

• 通过服务端渲染首屏直出，解决spa应用首屏渲染慢及不利于seo问题
• 通过客户端渲染接管页面内容交互得到更好的用户体验
• 这种方式通常称之为现代化的服务端渲染，也叫同构渲染
• 这种方式构建的应用通常称之为服务端渲染应用或者是同构应用

相关概念

• 什么是渲染：将数据+模板拼接在一起
• 传统的服务端渲染
• 客户端渲染
• 现代化的服务端渲染（同构渲染）

传统的服务端渲染(直接返回html，客户端无感知)

1. 获取页面模板
2. 获取数据
3. 渲染 数据+ 模板 = 结果
4. 把渲染结果发送给客户端

缺点

1. 前后端代码耦合在一起，不利于开发维护
2. 前端没有足够的发挥空间
3. 服务端压力大
4. 用户体验一般（如果需要查看其它页面，需要完全刷新页面）

客户端渲染

优点

1. 减少服务端压力
2. 实现前后端职责的划分（后端处理数据接口，前端实现页面渲染）
3. 体验提升 spa 无刷新体验
   

不足

1. 首屏渲染慢:

• 传统的服务端渲染只需要请求一次，就会将结果返回给我们
• 客户端渲染需要经过多次请求才能获得所有的数据进行渲染（多次http请求）

2. 不利于seo

• seo：网站的搜索引擎的排名，搜索引擎需要知道你的网站有什么
• 搜索引擎通过程序获取你的网页内容(获取的是html字符串,不会去像spa应用一样进行渲染)

const http = require('http');
http.get('localhost:3000', res => {
  let data = '';
  res.on('data', chunk => {
    data+=chunk
  })
  res.on('end', () => {
    console.log(data) //获取网页html字符串内容
    //如果是spa应用只会获得一个空的html，不会再去进行渲染
    //而服务端渲染返回时已经渲染完毕，获得的时所有的渲染结果
  })
})

现代化的服务端渲染（同构渲染 = 后端渲染 + 前端渲染）

• 基于React、Vue等框架，客户端渲染和服务器端渲染的结合
  • 在服务端执行一次，用于实现服务端渲染（首屏支出）
  • 在客户端执行一次，用于接管页面交互（之后都是spa应用）
• 核心解决seo及首屏渲染慢的问题
• 拥有传统服务端渲染的优点，也有客户端渲染的优点

如何实现同构渲染

• 使用Vue，React等框架的官方解决方案
  • 优点：有助于理解原理
  • 缺点：需要搭建环境，比较麻烦
• 使用第三方解决方案
  • React的Next.js
  • Vue的Nuxt.js

同构渲染的问题

• 开发条件有限

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

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

• 更多的服务器端负载

  1. 在node中渲染完整的应用程序，相比仅仅提供静态文件的服务其需要大量占用cpu资源
  2. 如果应用在高流量环境下使用，需要准备相应的服务器负载
  3. 需要更多的服务端渲染优化工作处理

服务端渲染使用建议

• 首屏渲染速度是否真的重要？
• 是否真的需要SEO