vue服务端渲染添加缓存的方法

为了提高Vue服务端渲染（SSR）的性能，我们可以添加缓存来保存已渲染的页面，以便下一次直接返回缓存中的结果，从而避免重复渲染相同的页面。

以下是Vue SSR添加缓存的基本步骤：

步骤1：创建缓存对象

首先，我们需要创建一个缓存对象，该对象将用于存储渲染后的HTML和其他信息。使用Node.js中的 Map 对象可以用来实现缓存对象。以下是一个简单的缓存对象的示例：

const pageCache = new Map()

步骤2：检查缓存

在每次进行渲染之前，我们需要检查缓存，以查找是否已经有缓存的页面。如果找到，则直接返回缓存的结果。

const cacheKey = req.url

if (pageCache.has(cacheKey)) {
  return res.send(pageCache.get(cacheKey))
}

在上面的代码中，我们使用了 req.url 作为缓存的键。然后，我们使用 pageCache.has 方法来检查是否有缓存的页面。如果有，则使用 pageCache.get 方法来获取缓存的结果，并直接发送给客户端。

步骤3：渲染页面并添加到缓存

如果没有找到缓存的结果，我们就需要进行正常的渲染流程，生成HTML，并将其添加到缓存中。

renderer.renderToString(context, (err, html) => {
  if (err) {
    return res.status(500).send('Server Error')
  }
  // 添加到缓存
  pageCache.set(cacheKey, html)
  res.send(html)
})

在上面的代码中，我们使用 renderer.renderToString 方法来将Vue组件渲染为HTML。一旦完成渲染，我们使用 pageCache.set 方法将结果添加到缓存中。然后，我们使用 res.send 方法将HTML发送回客户端。

示例1：使用Express框架实现缓存

以下是一个使用Express框架实现缓存的示例，用于演示完整的流程：

const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const template = require('fs').readFileSync('./index.html', 'utf-8')

const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template,
  clientManifest
})

const app = express()

app.use(express.static('dist'))

app.get('*', (req, res) => {
  const cacheKey = req.url
  if (cache.has(cacheKey)) {
    return res.send(cache.get(cacheKey))
  }

  const context = { url: req.url }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      return res.status(500).send('Server Error')
    }
    cache.set(cacheKey, html)
    res.send(html)
  })
})

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`)
})

在上面的代码中，我们首先创建了一个名为 cache 的缓存对象。然后，我们使用Express框架来创建Web服务器。

对于每个请求，我们首先使用 req.url 作为缓存的键来检查缓存。如果找到，则直接返回缓存的结果。如果没有，则创建一个 context 对象来传递给 renderer.renderToString 方法，以进行渲染。渲染完成后，将结果添加到缓存中并发送到客户端。

示例2：使用Koa框架实现缓存

以下是一个使用Koa框架实现缓存的示例，用于演示完整的流程：

const Koa = require('koa')
const { createBundleRenderer } = require('vue-server-renderer')
const template = require('fs').readFileSync('./index.html', 'utf-8')

const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template,
  clientManifest
})

const app = new Koa()

app.use(require('koa-static')('dist'))

app.use(async (ctx) => {
  const cacheKey = ctx.request.url
  if (cache.has(cacheKey)) {
    return ctx.body = cache.get(cacheKey)
  }

  const context = { url: ctx.request.url }

  try {
    const html = await renderer.renderToString(context)
    cache.set(cacheKey, html)
    ctx.body = html
  } catch (err) {
    ctx.status = 500
    ctx.body = 'Server Error'
  }
})

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
  console.log(`Server listening on http://localhost:${PORT}`)
})

在上面的代码中，我们使用Koa框架创建Web服务器。对于每个请求，我们首先使用 ctx.request.url 作为缓存的键来检查缓存。如果找到，则直接返回缓存的结果。如果没有，则创建一个 context 对象来传递给 renderer.renderToString 方法，以进行渲染。渲染完成后，将结果添加到缓存中并发送到客户端。如果发生错误，则返回500状态码。