一、什么是服务器端渲染(SSR)？
就是在服务端拼接好用户请求的静态页面，直接返回给客户端，客户端激活这些静态页面，让他们变成动态的，并且能够响应后续的数据变化。
二、为什么使用服务器端渲染(SSR)？
1、更好的 SEO（SEO是由英文Search Engine Optimization缩写而来， 中文意译为“[搜索引擎优化]），由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
2、产生更好的用户体验，更快的首屏渲染更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。
三、基础使用
- 新建一个文件夹，执行以下命令
$ npm install vue vue-server-renderer --save
$ npm install express --save
生成如下文件夹
image.png
自己新建demo文件里面新建index.html和index.js文件
index.html写上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
{{{meta}}}
</head>
<body>
<!--vue-ssr-outlet--> <!--注意：这是注入应用程序标记的位置。-->
</body>
</html>
index.js中写上
const Vue = require('vue')
const server = require('express')()
const fs = require('fs')
//读取模版
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./index.html', 'utf-8')
})
// 此参数是vue 生成Dom之外位置的数据 如vue生成的dom一般位于body中的某个元素容器中，
//此数据可在header标签等位置渲染，是renderer.renderToString()的第二个参数，
//第一个参数是vue实例，第三个参数是一个回调函数。
const context = {
title: 'Vue-ssr初探',
meta:` <meta name="viewport" content="width=device-width, initial-scale=1" /> `
}
server.get('*', (req, res) => {
//创建vue实例 主要用于替换index.html中body注释地方的内容，
//和index.html中 <!--vue-ssr-outlet-->的地方是对应的
const app = new Vue({
data: {
url: req.url,
data: ['加油，你是最胖的'],
title: '欢迎学习vue-ssr服务端渲染'
},
//template 中的文本最外层一定要有容器包裹， 和vue的组件中是一样的，
//只能有一个父级元素，万万不能忘了！
template: `
<div>
<div>url : {{url}}</div>
<p>{{title}}</p>
<p v-for='item in data'>{{item}}</p>
</div>
`
})
//将 Vue 实例渲染为字符串 (其他的API自己看用法是一样的)
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('err:' + err)
return
}
//将模版发送给浏览器
res.end(html)
console.log('http://localhost:8080/')
})
})
server.listen(8080)
image.png
image.png
打开demo文件夹,运行index.js
node index.js
image.png
image.png
浏览器右键查看源代码
image.png
