vue 构建 SSR 服务端渲染 — 简单的服务端渲染
简单的服务端渲染
基础的服务端渲染需要安装几个比较重要的模块
npm i vue vue-server-renderer express
在根路径下创建文件 server.js
简易的服务端
首先需要构建一个简易的服务器,因为是服务端渲染,所以需要在服务端返回 html 代码
// server.js
const server = require('express')()
// 当浏览器请求该地址时返回信息
server.get('/', (req, res) => {
// 在这里返回 html 代码到浏览器中
})
// 监听端口
server.listen(3000, () => {
console.log('server is running at 3000')
})
在服务端构建 html 代码
构建 html 代码需要两个步骤:
- 实例化vue
- 通过 vue-server-renderer 将 vue实例渲染为 html 字符串
// 获取渲染器,用于将 vue 实例渲染为 html代码
// 使用服务端渲染返回
const Vue = require('vue')
const server = require('express')()
// 渲染器,用于将 vue 渲染为 html 代码
const renderer = require('vue-server-renderer').createRenderer()
server.get('/', (req, res) => {
// 实例化 vue
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是: {{ url }}</div>`
})
// 通过 renderer 将 app 实例渲染成 html
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
// 将编译后的 html 代码 返回到浏览器
res.end(html)
})
})
// 监听端口
server.listen(3000, () => {
console.log('server is running at 3000')
})
HTML模板
通过 vue实例 编译的 html 代码仅包含 body 部分的,所以我们还需要 html页面 的部分,如 html标签 和 head标签
index.template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
server.js
const fs = require('fs')
// 定义模板
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./index.template.html', 'utf-8')
})
<!--vue-ssr-outlet-->
是必须且不可修改的,他是用于标识 vue实例 编译的代码需要插入的地方。也就是说,未来 renderer 编译后的 html 代码将会替换 <!--vue-ssr-outlet-->
标签
模板中使用插值
如果我们希望在模板中使用外部数据,可以通过插值表达式来实现
index.template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
<title>{{ title }}</title>
<!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
server.js
// 模板上下文
const context = {
title: '这是标题',
meta: '<meta name="description" content="SSR">'
}
// 通过 renderer 将 app 实例渲染成 html
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
// 返回代码到前端
})
持续更新中…