22_ssr
竺鸿骞
1 渲染一个应用
- 创建一个新的文件夹，cd 进入
- 执行 npm init -y
- 在 package.json 中添加 “type”: “module” 使 Node.js 以 ES modules mode 运行
- 执行 npm install vue
- 创建一个 example.js 文件
// server.js文件运行在 Node.js 服务器上
import { createSSRApp } from 'vue'
// Vue 的服务端渲染 API 位于 `vue/server-renderer` 路径下
import { renderToString } from 'vue/server-renderer'
const app = createSSRApp({
data: () => ({ count: 1 }),
template: `<button @click="count++">{{ count }}</button>`
})
renderToString(app).then((html) => {
console.log(html)
})
- 接着运行
node example.js - 它应该会在命令行中打印出如下内容
<button>1</button>
2 SSR 服务器
- 执行 npm install express
- 创建下面的 server.js 文件
import express from 'express'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
const server = express()
server.get('/', (req, res) => {
const app = createSSRApp({
data: () => ({ count: 1 }),
template: `<button @click="count++">{{ count }}</button>`
})
renderToString(app).then((html) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR Example</title>
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`)
})
})
server.listen(3000, () => {
console.log('ready')
})
- 最后，执行 node server.js，访问 http://localhost:3000。你应该可以看到页面中的按钮了
3 激活客户端
- 如果你点击该按钮，你会发现数字并没有改变
- 这段 HTML 在客户端是完全静态的，因为我们没有在浏览器中加载 Vue
- 也就是在浏览器端，Vue 要创建一个与服务端完全相同的应用实例，然后将每个组件与它应该控制的 DOM 节点相匹配，并添加 DOM 事件监听器
- 为了在激活模式下挂载应用，我们应该使用 createSSRApp() 而不是 createApp()
- 书写浏览器端代码
- 创建public文件夹
- 在server.js设置：
server.use(express.static('./public')) - 在public里面放vue.ems-browser.js文件和client.js
- client.js里面的代码和服务端创建实例代码一样:
import { createSSRApp } from '/vue.esm-browser.js'
const app = createSSRApp({
data: () => ({ count: 1 }),
template: `<button @click="count++">{{ count }}</button>`
})
app.mount('#app')
- 在服务端返回的html代码中引入client.js
// server.js
import express from 'express'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
const server = express()
server.use(express.static('./public'))
server.get('/', (req, res) => {
const app = createSSRApp({
data: () => ({ count: 1 }),
template: `<button @click="count++">{{ count }}</button>`
})
renderToString(app).then((html) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR Example</title>
</head>
<body>
<div id="app">${html}</div>
<script type='module' src='/client.js'></script>
</body>
</html>
`)
})
})
server.listen(3000, () => {
console.log('ready')
})
4 Nuxt
- 是一个构建于 Vue 生态系统之上的全栈框架
- 它为编写 Vue SSR 应用提供了丝滑的开发体验
- 你还可以把它当作一个静态站点生成器来用
类似资料：