nuxt3+vite+ts 如何对页面做服务器端缓存

在 Nuxt.js 3.0 中，你可以使用 `ssrCache` 函数来进行服务器端缓存。这个函数可以在页面组件中使用，并且可以自动缓存页面的 HTML。

下面是一个示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ssrCache } from 'nuxt'

export default defineComponent({
  asyncData() {
    // 在这里获取数据
  },

  computed: {
    title() {
      // 计算标题
    },

    content() {
      // 计算内容
    },
  },

  async beforeRender() {
    const cache = ssrCache(this.$nuxt.context)

    if (cache) {
      // 从缓存中获取 HTML
      return { html: cache }
    }

    // 如果没有缓存，就渲染页面
    const { title, content } = this
    const html = await this.$renderToString()

    // 将 HTML 缓存起来
    cache.set(html, { title, content })

    return { html }
  },
})
</script>

在这个示例中，我们先从缓存中获取缓存的 HTML，如果缓存中有数据，就直接返回缓存的 HTML，否则就渲染页面，并且将渲染出来的 HTML 缓存起来。

注意，这个示例中使用了 Nuxt.js 3.0 中的新 API，需要使用 TypeScript 来开发。如果你使用的是 JavaScript，可以使用类似的逻辑来实现服务器端缓存。