I am in the process of developing a NUXT.JS application that retrieves JSON data from an API called Storyblok. I would appreciate some advice or suggestions on how to efficiently store/cache the API response to avoid making multiple requests when navigating through different pages.
Although I have gone through numerous articles and tutorials, many recommend using Redis, which seems like overkill for my specific requirement.
Below, I have shared my current progress excluding the storage/caching implementation. Any insights or guidance on this matter would be highly valued.
<script>
export default {
asyncData (context) {
const version = context.query._storyblok || context.isDev ? 'draft' : 'published'
const fullSlug = (context.route.path === '/' || context.route.path === '') ? 'home' : context.route.path
return context.app.$storyapi.get(`cdn/stories/${fullSlug}`, {
version
}).then((res) => {
return res.data
}).catch((res) => {
if (!res.response) {
context.error({ statusCode: 404, message: 'Failed to receive content form api' })
} else {
context.error({ statusCode: res.response.status, message: res.response.data })
}
})
},
data () {
return {
story: { content: {} }
}
},
mounted () {
this.$storybridge(() => {
const { StoryblokBridge } = window
const storyblokInstance = new StoryblokBridge()
storyblokInstance.on('input', (event) => {
if (event.story.id === this.story.id) {
this.story.content = event.story.content
}
})
storyblokInstance.on(['published', 'change'], (event) => {
this.$nuxt.$router.go({
path: this.$nuxt.$router.currentRoute,
force: true
})
})
})
}
}
</script>