关于VueSSR的一些理解和详细配置

VueSSR简介

Vue Server-Side Rendering（Vue SSR）是为了解决客户端渲染（CSR）中的SEO（Search Engine Optimization）问题而出现的。Vue SSR使用Node.js的服务器渲染Vue组件，在服务器端将Vue组件渲染成HTML并将其发送给客户端。在客户端接收到HTML后，由Vue.js接管html，并成为一个SPA（Single-page application）。

Vue SSR利用Node.js的流程控制实现异步渲染，比起React SSR的renderToString同步渲染，Vue SSR利用Node.js的事件循环更不易阻塞。

VueSSR的实现步骤

Vue SSR的具体实现可以分为四个步骤：

对Vue组件进行服务器端渲染（SSR）
在服务器端产出静态资源，包括JS、CSS、图片等
配置服务器，渲染页面
配置客户端，将静态资源添加到客户端

VueSSR的详细配置

步骤一：对Vue组件进行服务器端渲染（SSR）

对于Vue组件进行服务器端渲染（SSR）的方式是使用Vue.js提供的一个服务器端渲染的中间件：vue-server-renderer。

// 获取Vue应用
const app = express();
// 创建一个renderer
const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.html', 'utf-8')
})
// 创建Vue实例进行渲染
const vm = new Vue({
  data: {
    title: 'Vue SSR Demo'
  },
  template: '<div>{{ title }}</div>'
})
// 获取到Vue实例渲染后的html文件
const html = renderer.renderToString(vm)

步骤二：在服务器端产出静态资源，包括JS、CSS、图片等

Vue SSR在服务器端进行了组件解析和渲染，需要将组件解析后的HTML、JS、CSS以及图片等静态资源都打包到HTML中。

// 创建一个服务端渲染器
const renderer = createRenderer({
  template: fs.readFileSync(
    path.resolve(__dirname, '../index.template.html'),
    'utf-8'
  )
})
// 设置正确的文件路径来获取正确地址的静态资源
server.use('/dist', express.static(path.join(__dirname, '../dist')))
// 获取HTML模板
const template = fs.readFileSync(
  path.resolve(__dirname, '../index.template.html'),
  'utf-8'
)
// 生成一个renderer
const renderer = createRenderer({ template })
// 获取到路由
const router = createRouter()
// 服务端渲染函数
function renderToString (context) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      err ? reject(err) : resolve(html)
    })
  })
}

步骤三：配置服务器，渲染页面

Serverside.js文件，启动服务器，将Vue组件渲染成HTML，添加到路由中进行展示。

// renderToString
import { createApp } from './app'
import { renderToString } from '@vue/server-renderer'
const express = require('express')
const fs = require('fs')
const path = require('path')
const server = express()
// 定义HTML模板
const indexHTML = ({ app, html, state }) => `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vite App</title>
</head>
<body>
  <div id="app">${html}</div>
  <script>window.__INITIAL_STATE__ = ${JSON.stringify(state)}</script>
  <script type="module" src="/src/main.server.js"></script>
</body>
</html>`
server.use('/assets', express.static(path.join(__dirname, 'assets')))
server.get('*', async (req, res) => {
  const { app, store } = createApp()
  const url = req.url
  const routerMatch = router.getMatchedComponents(url)
  try {
    const html = await renderToString(app)
    const state = store.getState()
    if (!routerMatch.length) {
      res.status(404).end('Page not found')
      return
    }
    res.status(200).end(indexHTML({
      app: html,
      state,
      url
    }))
  } catch (err) {
    console.error(err)
    res.status(500).end('Internal Server Error')
  }
})
server.listen(3000, () => {
  console.log(`Server listening at http://localhost:3000`)
})

步骤四：配置客户端，将静态资源添加到客户端

客户端存在一个Vue初始化的过程，在此过程中需要从之前服务器端渲染传入的state中恢复上一次的数据，并将服务器端渲染的HTML挂载到客户端的DOM上面并进行事件注册。

// entry-client.js中初始化Vue，并在初始化时使用之前服务器端渲染传入的state数据
import { createApp } from './app'
const { app, store } = createApp(window.__INITIAL_STATE__)
app.mount('#app')