服务器端渲染基础

概念

• 随着前端技术栈和工具链的迭代成熟,前端工程化,模块化成为了当下主流技术方案,在这比技术浪潮中,涌现了诸如Anfular,React,Vue等基于客户端渲染的前端框架,这类框架所构建的SPA单页面应用的优缺点如下

1. 优点
   1.1 用户体验好
   1.2 开发效率高
   1.3渲染性能好
   1.4可维护性好
2. 缺点
   2.1 首屏渲染时间长 => 与传统服务器端渲染直接获取服务端直接渲染好的HTML不同,单页面应用使用js在客户端生成HTML来呈现网页内容,用户需要等待客户端js解析执行完才能看到页面,这样就使得首屏加载时间长,从而影响用户体验
   2.2 不利于SEO=>因为当搜索引擎爬虫网站HTML文件的时候,单页面的html是没有内容的,因为它需要通过客户端js解析执行完才能够生成网页内容,而目前的主流搜索引擎对于这一部分内容的抓取还不是很好

• 为了解决是上面的两个缺陷,业界借鉴了传统的服务器端直出HTML的方案提出在服务器端执行前端框架代码来生成网页内容,然后将渲染好的网页内容返回给客户端,客户端只需要展示就可以了
  
• 当然,不仅如此,为了更好的用户体验以及页面的交互,同时会在客户端将来自服务端渲染的内容激活为一个SPA应用,也就是说之后的页面中的交互都是通过客户端渲染来进行处理的
  
  同构应用
• 通过服务端渲染首屏直出,解决SPA应用首屏渲染慢以及不利于SEO问题
• 通过客户端渲染接管页面内容交互得到更好的用户体验
• 这种方式通常称之为现代化的服务端渲染,也叫同构渲染
• 这种方式构建的应用称之为服务端渲染应用或者同构应用

相关概念

• 什么是渲染
• 传统的服务端渲染
• 客户端渲染
• 现代化的服务端渲染(同构渲染)

什么是渲染

• 渲染:把数据+模板拼接到一起
  
• 渲染的本质是字符串的解析替换

传统的服务端渲染

• 早期的Web页面渲染都是在服务端进行的,服务端在运行的过程中,把所需要的页面数据结合模板渲染的html,然后响应给浏览器,所以浏览器呈现出来的直接就是包含内容的页面
  
• 以上最重要的是第四步

通过Node.js演示传统的服务器端渲染模式

const express = require("express")
const fs = require("fs")
// 模板引擎实际上就是字符串的替换
const template = require("art-template")
const app = express()
app.get("./", (req, res) => {
  // 1. 获取页面模板
  const templateStr = fs.readFileSync("./index.html", "utf-8");
  // 2. 获取数据
  const data = JSON.parse(fs.readFileSync("./data.json", "utf-8"))
  // 3. 渲染:  数据  +  模板  =  最终结果
  const html = template.render(templateStr, data)
  // 4. 把渲染结果发送给客户端
  res.send(template)
})
app.listen(3000, () => {
  console.log("启动服务器成功")
})

优点:

• 适用于应用不复杂的页面

缺点:

• 前后端代码完全耦合在一起,不利于开发和维护
• 服务端压力大
• 用户体验一般(想看到其他的页面,必须刷新请求一个新的页面)

客户端渲染

• 服务器端渲染的缺点随着客户端Ajax技术的普及得到有效的解决
• Ajax使得客户端动态获取数据成为可能,服务端渲染工作 => 来到的客户端
• 解决了服务端渲染的问题

1. 前后端代码完全耦合在一起,不利于开发和维护 => 页面的渲染放到客户端渲染处理,这样的话代码及人员的职责就可以实现划分,也就是说后端只需要负责数据的处理,给前端提供接口,而前端主要负责视图渲染的处理,这样的话我们就能极大提高项目的开发效率及可维护性
2. 服务端压力大 => 渲染的工作分散到客户端
3. 用户体验一般 => 传统的服务端渲染,我们要查看不同的页面,那么每个页面都要去完整的刷新,体验不够友好,客户端渲染的话,单页面SPA这种无刷新体验相比传统的服务端渲染体验好很多

• 客户端渲染的流程
  
• 后端:负责处理数据接口
• 前端:负责将接口数据渲染到页面中

客户端解决了服务器端渲染的问题,但也存在一些明显的不足

• 首屏渲染慢:客户端渲染从服务端返回的是空白的HTML和相关的js代码,只有等js代码完全执行完成后才能看到完整的内容(至少发送两个http请求,html和js),而服务端渲染时直接返回拼接好的HTML(一个http请求)
• 不利于SEO:因为返回的是空白的HTML,页面的内容是由js代码生成,SEO只会搜索HTML字符串中的内容,不会像浏览器一样去解析js代码,空白的HTML,SEO信息就是空白的

现代化的服务端渲染

前面了解到客户端渲染有两个比较突出的缺点

• 首屏渲染慢
• 不利于SEO

解决办法:现代化的服务端渲染 => 同构渲染
同构渲染 = 后端渲染 + 前端渲染

• 基于React,Vue等框架,客户端渲染和服务器端渲染的结合

  • 在服务器端执行一次,用于实现服务器端渲染(首屏直出)
  • 在客户端再执行一次,用户接管页面交互

• 核心解决SEO和首屏渲染慢的问题

• 拥有传统服务端渲染的优点,也有客户端渲染的优点
  
  如何实现同构渲染

• 使用Vue,React等框架的官方解决方案

  • 优点:有助于理解原理
  • 缺点:需要搭建环境,比较麻烦

• 使用第三方解决方案

  • React生态的Next.js
  • Vue生态的Nuxt.js

• 接下来我们以Vue生态中的Nuxt.js为例演示同构渲染应用

同构渲染的问题

• 开发条件有限

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

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

• 更多的服务端负载

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

服务端渲染使用建议

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