NUXT Crawer Static Generation Cache/Reuse API request data

[Mortalife]

Hello,

Is there any way to cache frequently used API calls on static site generation?

I have 2 endpoints which are hit for header/footer information and some language based calls which are present on every page but the generate command calls the endpoints again even though the data will not have changed.

I want to keep using the crawler rather than manually defining the routes and passing payload data. Likewise, I would prefer at this stage not to put a cache in front of my API.

Have I missed a configuration setting to make this possible? Any recommendations besides what I've outlined above?

Thanks

[renestalder]

What you could do is to save the results to Vuex and then check Vuex for the existence of the data before calling the same endpoint again. If your API comes with a client library, there's also a chance there might be a caching functionality in it.

Or you could use provide and inject to load the data on a higher level and provide it to all components, allowing you to basically check from everywhere whether this data is there or not, without using Vuex.

Or what I do, but is the opposite of what you want to do:

• I call the API once in the generate configuration of the nuxt config to get all data (for all languages) and pass it down to the pages via the payload. From there, I put it to the Vuex store. So, I have only one big API request to get all the data. I don't need to individually cache anything. This setup looks like that:

  generate: {
    crawler: false,
    routes: async () => {
      const {pages} = await getAllData();
  
      return pages
        .filter(page => {
          // Some logic to exclude certain pages from being generated, like configuration
        })
        .map(page => {
          return {
            route: page.slug
            payload: {page}
          };
        });
    }
  },

• In static generation mode, Nuxt passes the payload to the client side, so I also I wouldn't need to call any API again, as I've done everything during the generation already.

  async fetch() {
    const context = this.$nuxt.context;
  
    if (context.payload?.page) {
     // Pass data to vuex or whatever
    }
  }

[Mortalife]

Yeah interestingly, I moved it into Vuex for the method you suggested first but it appears that it dumps the store and regenerates it on every new page generation. I can understand why it does this; so you don't end up with a huge store being retrieved on first load of a page which might only have a small list of dependencies.

I am aware of the second option and for simplicity I wanted to avoid specifying every route manually. Particularly as Nuxt added the crawler recently and wrote to it's benefit.

I guess I was really hoping for a mechanism between Vue and the network whereby it was a little smarter about the data it retrieved, why do a round trip for a url you've already visited once this generation session?