# 起步
这份指南仍处在活跃更新的状态
# 安装
为了创建一个服务端渲染的应用,我们需要安装 @vue/server-renderer
:
npm install @vue/server-renderer
## 或
yarn add @vue/server-renderer
1
2
3
2
3
# 注意
- 推荐使用的 Node.js 版本是 12+。
@vue/server-renderer
和vue
的版本号必须匹配。@vue/server-renderer
依赖一些 Node.js 的原生模块,因此只能用在 Node.js 中。我们未来可以提供一个简单的可运行在其它 JavaScript 运行时中的构建。
# 渲染一个 Vue 应用
和使用 createApp
创建的只有客户端的 Vue 应用不同,创建一个服务端渲染应用需要使用的是 createSSRApp
:
const { createSSRApp } = require('vue')
const app = createSSRApp({
data() {
return {
user: 'John Doe'
}
},
template: `<div>Current user is: {{ user }}</div>`
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
现在,我们可以使用 renderToString
函数将我们的应用实例渲染为一个字符串。此函数返回一个 Promise 来解析渲染出的 HTML。
const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')
const app = createSSRApp({
data() {
return {
user: 'John Doe'
}
},
template: `<div>Current user is: {{ user }}</div>`
})
const appContent = await renderToString(app)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 和服务器集成
在这个示例中我们使用 Express 来运行一个应用:
npm install express
## 或
yarn add express
1
2
3
2
3
// sever.js
const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')
const server = require('express')()
server.get('*', async (req, res) => {
const app = createSSRApp({
data() {
return {
user: 'John Doe'
}
},
template: `<div>Current user is: {{ user }}</div>`
})
const appContent = await renderToString(app)
const html = `
<html>
<body>
<h1>My First Heading</h1>
<div id="app">${appContent}</div>
</body>
</html>
`
res.end(html)
})
server.listen(8080)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
现在,当运行这段 Node.js 脚本的时候,我们可以在 localhost:8080
看到一个静态的 HTML 页面。然而,这段代码并不是 hydrate 的:Vue 还没有将这段发送自服务器的静态 HTML 转换为响应客户端数据变化的动态 DOM。这部分会被涵盖在客户端 hydration 章节中。