服务器端渲染

服务器端渲染(Server Side Rendering,SSR),简单理解就是将页面在服务器中完成渲染，然后在客户端直接展示。

服务器端渲染的Vue应用程序被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。

那么在什么情况下会使用服务器渲染，以及如何实现服务器渲染呢？

一.初始服务器端渲染

服务器端渲染，顾名思义就是将页面或者组件通过服务器生成HTML字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。

客户端渲染和服务器端渲染的区别

1.1客户端渲染

客户端渲染，即传统的单页面应用(SPA)模式，Vue.js构建的应用程序默认情况下是一个HTML模板页面，只有一个id为app的<div>根容器，然后通过webpack打包生成css ，js等资源文件，浏览器加载，解析来渲染HTML。

在客户端渲染时，一般使用的是webpack-dev-server插件，它可以帮助用户自动开启一个服务器端，主要作用是监控代码并打包，也可以配合webpack-hot-middleware来进行热更替，这样能提高开发效率。

1.2服务器端渲染

Vue进行服务器端渲染时，需要利用Node.js搭建一个服务器，并添加服务器端渲染的代码逻辑。

使用webpack-dev-middleware中间件对更改的文件进行监控，使用webpack-hot-middleware中间件进行页面的热更新，使用vue-server-renderer插件来渲染服务器端打包的bundle文件到客户端。

1.3服务器端渲染的优点

如果网站对SEO(搜索引擎优化)要求比较高，页面又是通过异步来获取内容，则需要使用服务器渲染来解决问题。

服务器端渲染相对于传统的SPA来说，主要有以下优势。

(1)利于SEO

Vue SSR 利用Node.js搭建页面渲染服务，在服务端完成页面的渲染,便于输出SEO更友好的页面。

(2)首屏渲染速度快

在前后端分离的项目中，前端部分需要先加载静态资源，再采用异步的方法去获取数据，最后来渲染页面。

其中，在获取静态资源和异步获取数据阶段，页面上是没有数据的，这将会影响首屏的渲染速度和用户体验。

而使用服务器端渲染的项目，特别是对于缓慢的网络情况或运行缓慢的设备来说，无须等待所有的JavaScript都完成下载并执行，才会显示服务器渲染的标记，这使得用户将会更快速地看到完整渲染的页面，将会大大提升用户体验。

1.4服务器渲染的不足

虽然服务器端渲染有首屏加载速度快和有礼于SEO的优点，但是在使用服务器端渲染的时候，还需要注意以下两点事项。

(1)服务器端压力增加

服务器端渲染需要在Node.js中渲染完整的应用程序，这会大量占用CPU资源。

如果在高流量的环境下使用，建议利用缓存来降低服务器负载。

(2)涉及构建设置和部署的要求

单页面应用程序可以部署在任何静态文件服务器上，而服务器端渲染应用程序，需要运行在Node.js服务器环境。

二.服务器端渲染的简单实现

2.1创建vue-ssr项目

使用命令行工具创建一个vue-ssr项目

C:\Users\Dell>mkdir vue-ssr


C:\Users\Dell>cd vue-ssr


C:\Users\Dell\vue-ssr>npm init -y

执行上述命令后，会在vue-ssr目录下生成一个package.json文件

Wrote to C:\Users\Dell\vue-ssr\package.json:


{
  "name": "vue-ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在Vue中使用服务器端渲染，需要借助Vue的扩展模块 vue-server-renderer。

C:\Users\Dell\vue-ssr>npm i vue@2.6.x vue-server-renderer@2.6.x --save

vue-server-renderer是Vue中处理服务器加载的一个模块，给Vue提供在Node.js服务器端渲染的功能。

vue-server-renderer依赖一些Node.js原生模块，所以目前只能在Node.js中使用

2.2渲染Vue实例

将vue-server-renderer安装完成后，创建服务器脚本文件test.js，实现将Vue实例的渲染结果输出到控制台中。

//创建一个Vue实例
const Vue = require('vue')
const app = new Vue({
    template:'<div>SSR的简单使用</div>'
})        


// 创建一个renderer
const renderer = require('vue-server-renderer').createRenderer()
// 将vue实例渲染为HTML
renderer.renderTostring(app,(err,html)=>{
    if (err) {
        throw err
    }
    console.log(html)
})