I am working on a Vue + nuxt.js application that displays multiple pages with Highcharts. The charts are generated by a dynamic component that requires a web service URL as a parameter. How can I implement caching for these pages to last for approximately 1 day?
I came across two links related to component caching, but they only discuss caching at the component level, not for the entire page. The component cache method caches components based on a 'name' and does not support caching dynamically with parameters. Therefore, this approach does not seem suitable for my requirements.
- Nuxt Cached Components
- Vue SSR Component Level Caching
Can anyone provide suggestions on how I can effectively cache my pages?
Here is an example page where I call the dynamic component with the URL parameter:
<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>
Below is an example of the dynamic component which accepts a parameter and makes a web service call to retrieve data for rendering the chart.
<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>