Vue + Nuxt.js - 如何用组件缓存整个页面？

Question

我有一个 Vue + nuxt.js 应用程序，它使用 Highcharts 呈现几个页面。这些图表是由一个动态组件创建的，该组件将 Web 服务 URL 作为参数。如何将此类页面缓存大约 1 天？

我找到了这两个链接，但这些只是指组件缓存，而不是整个页面。组件缓存将根据“名称”缓存组件，并且会阻碍动态缓存采用参数的缓存？因此，这种方法看起来不适合我。

• nuxt cached components
• vue ssr component level caching

关于如何缓存我的页面有什么建议吗？

我使用 URL 参数调用动态组件的示例页面：

<template>
   <keep-alive>
    <chart :url="this.$axios.defaults.baseURL + 'api/analytics/age'" keep-alive/>
  </keep-alive>
</template>

<script>
    import chart from '~/components/analytics/chart'

    export default {
        components: {
          chart,
        },      
    }
</script>

动态组件的一个例子，它接受参数，然后进行 Web 服务调用以获取用于渲染图表的数据。

<template>
  <highcharts v-if="isChartDataLoaded" :options="chartOptions"></highcharts>
</template>
<script>
    import axios from 'axios';
    import {Chart} from 'highcharts-vue'
    import Highcharts3D from 'highcharts/highcharts-3d'
    import Highcharts from 'highcharts'

    if (typeof Highcharts === 'object') {
        Highcharts3D(Highcharts);
    }

    export default {
        name: 'chart',
        props: ['url'],
        serverCacheKey: props => props.url,
        components: {
            highcharts: Chart
        },
        data() {
            return {
                isChartDataLoaded: false,
                chartOptions: {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        pointFormat: '{point.percentage:.2f}%',
                    },
                    chart: {
                        type: 'pie',
                        options3d: {
                            enabled: true,
                            alpha: 50,
                        },
                    },
                    series: [{
                        name: '',
                        data: [1],
                        tooltip: {
                            valueDecimals: 0
                        },
                        animation: false

                    }],
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            innerSize: '30%',
                            depth: 100,
                            dataLabels: {
                                enabled: true,
                                percentageDecimals: 2,
                                color: '#002a52',
                                connectorColor: '#002a52',
                                formatter: function () {
                                    return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
                                }
                            }
                        }
                    },

                    credits: {
                        enabled: false
                    },
                    exporting: {
                        buttons: {
                            printButton: {
                                enabled: false
                            },
                            contextButton: {
                                enabled: false
                            }
                        }
                    },
                }
            };
        },
        mounted() {
            axios.post(this.url, {
                locale: this.$route.query.locale ? this.$route.query.locale : this.$i18n.locale
            }).then(response => {
                this.chartOptions.series[0].data = response.data;
                this.isChartDataLoaded = true
            }).catch(e => {
                console.log(e)
            })
        },
    }
</script>

Answer 1

我的回复迟了，但我希望它可以帮助其他人寻找答案。如果要缓存整个页面，可以使用nuxt-ssr-cacge。 然后在你的 nuxt.config.js 中：

module.exports = {
  // If you provide a version, it will be stored inside cache.
  // Later when you deploy a new version, old cache will be
  // automatically purged.
  version: pkg.version,

  // ....

  modules: [
      'nuxt-ssr-cache',
  ],
  cache: {
    // if you're serving multiple host names (with differing
    // results) from the same server, set this option to true.
    // (cache keys will be prefixed by your host name)
    // if your server is behind a reverse-proxy, please use
    // express or whatever else that uses 'X-Forwarded-Host'
    // header field to provide req.hostname (actual host name)
    useHostPrefix: false,
    pages: [
      // these are prefixes of pages that need to be cached
      // if you want to cache all pages, just include '/'
      '/page1',
      '/page2',

      // you can also pass a regular expression to test a path
      /^\/page3\/\d+$/,

      // to cache only root route, use a regular expression
      /^\/$/
    ],
    
    key(route, context) {
      // custom function to return cache key, when used previous
      // properties (useHostPrefix, pages) are ignored. return 
      // falsy value to bypass the cache
    },

    store: {
      type: 'memory',

      // maximum number of pages to store in memory
      // if limit is reached, least recently used page
      // is removed.
      max: 100,

      // number of seconds to store this page in cache
      ttl: 86400, //Actually One day
    },
  },

  // ...
};

我希望它有帮助！

Answer 2

这里是缓存整个页面的新解决方案

如果你需要的话，你甚至可以缓存一致的 api，比如菜单

https://www.npmjs.com/package/nuxt-perfect-cache

npm i nuxt-perfect-cache

// nuxt.config.js

modules: [
    [
        'nuxt-perfect-cache',
        {
          disable: false,
          appendHost: true,
          ignoreConnectionErrors:false, //it's better to be true in production
          prefix: 'r-',
          url: 'redis://127.0.0.1:6379',
          getCacheData(route, context) {          
            if (route !== '/') {
              return false
            }
            return { key: 'my-home-page', expire: 60 * 60 }//1hour
          }
        }
      ]
]