22_ssr

最新推荐文章于 2024-08-27 11:07:59 发布

JRealcs

最新推荐文章于 2024-08-27 11:07:59 发布

阅读量532

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_58764638/article/details/127598879

版权

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')
})