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: `{{ count }}`
})

renderToString(app).then((html) => {
  console.log(html)
})
1
2
3
4
5
6
7
8
9
10
11
12
13

• 接着运行node example.js
• 它应该会在命令行中打印出如下内容

<button>1</button>
1

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: `{{ count }}`
  })

  renderToString(app).then((html) => {
    res.send(`
    
    
      
        
      
      
        
${html}
      
    
    `)
  })
})

server.listen(3000, () => {
  console.log('ready')
})
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

• 最后，执行 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: `{{ count }}`
})

app.mount('#app')
1
2
3
4
5
6
7

• 在服务端返回的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: `{{ count }}`
  })

  renderToString(app).then((html) => {
    res.send(`
    
    
      
        
      
      
        
${html}
        
      
    
    `)
  })
})

server.listen(3000, () => {
  console.log('ready')
})
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
31
32

4 Nuxt

• 是一个构建于 Vue 生态系统之上的全栈框架
• 它为编写 Vue SSR 应用提供了丝滑的开发体验
• 你还可以把它当作一个静态站点生成器来用