Nuxt.js: cache async data

[bimohxh]

I want to request async dada in page:

As the doc say that, the sync request must be placed in data() for server rendered, so my code is :

export default {
    name: 'home',
    serverCacheKey () {
      return Math.floor(Date.now() / 10000)
    },
    data () {
      return axios.get('repo/latest').then(res => {
        return {
          latestRepos: res.data
        }
      })
    }
  }

but every time I open this page, I can find the ajax request is been sended to my server.

so the cache has no point?

_{This question is available on Nuxt.js community (#c364)}

[ausir0726]

for this example https://nuxtjs.org/examples/cached-components/#__nuxt
cache just only on work on server side .
so , as we know , SSR is working good for SEO and no JS client
( The premise is we are building SPA or front-end/back-end split )
so , if you use SSR you will get 2x bandwidth and loading for your api server
because each connection will have 1 SSR connect to API , and 1 browser build connect to API ( fetch newest data )
so , if you enable SSR cache can reduce the server side api request .

here have a demo for http request cache for nuxt.js

[Atinux]

I could not explain better than @ausir0726 GIF.

The cache is for sub component since we force the call of data for page components.

I recommend you to use a cache layer on top of your API directly.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.