vue服务端渲染
2020-01-17 本文已影响0人
meng_281e
一、什么是服务器端渲染(SSR)？
就是在服务端拼接好用户请求的静态页面，直接返回给客户端，客户端激活这些静态页面，让他们变成动态的，并且能够响应后续的数据变化。
二、为什么使用服务器端渲染(SSR)？
1、更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
2、产生更好的用户体验，解决首页加载慢（一次性返给客户端，减少http请求）。
三、基础使用
- 新建一个文件夹，执行以下命令（安装vue服务端、node框架express）
$ npm install vue vue-server-renderer --save
$ npm install express --save
自己新建demo文件里面新建 index.html 和 index.js 文件
index.html写上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</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: `
<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)
})
})
server.listen(8080)
