什么是ssr 查看
vue.js是一个客户端应用框架，一般会在浏览器中输出vue组件，然后编译成vitural DOM，最后生成DOM，把页面给渲染出来。 但是它同时也可以把同一个vue组件在服务器端渲染成HTML字符串，返回给浏览器，然后浏览器端加载完所需的js文件后，就以这些HTML字符串为基础，在客户端生成可交互的应用程序。
为什么需要ssr
- 更好的 SEO
- 更快的内容到达时间(time-to-content)
使用vue来做为后端渲染模板例子
一、安装node环境和npm命令
在node官网选择最新的LTS版本安装。
打开命令面板，在命令面板下输入 node -v
输出
v8.11.3
二、创建示例项目
- 创建一个文件夹vue-ssr-demo1
- 在命令面板进入该文件夹
- 执行 npm init 命令生成package.json 文件
- 执行 npm install vue express vue-server-renderer -D 命令安装vue.js express.js vue-server-renderer
- 创建一个server.js,输入以下代码（以官网ssr为例）：
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer() //创建一个 renderer实例，在服务器端渲染vue组件
// 第 1 步：server监管所有路由
server.get('*', (req, res) => {
// 第 2 步：创建一个 Vue 实例
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
// 服务器监听地址
express.listen(8080, () => {
console.log('服务器已启动！')
})
- 执行node server.js 可以看到服务器成功启动，就可以在浏览器上输入localhost:8080进行访问。
总结： 使用vue-server-renderer可以让vue组件在服务端进行解析，生成对应的html字符串，然后通过服务器端直接返回给客户端（浏览器）进行渲染。但以上程序会有以下几个问题：
- 仅仅是把vue当做后端渲染模板使用，只返回html，程序没有实现不了任何交互效果
- 每次访问都会重新加载vue组件，消耗服务器端性能。
vue 服务端实现原理及流程
服务端渲染流程图
简化版流程图以及说明
代码目录
