We use storyblok as our cms on dumbo.design which is obviously built with Nuxt (v2 at this moment)

On dumbo.design/insights we pull "guides" and "articles" with 2 calls in asyncData() and map specific props to suit our needs for this use case perfectly.

// /pages/insights/index.vue
async asyncData() {
  const resultArticles = await $storyblok.get('', {
      // .. some query filters etc.
    });

    const articles = resultArticles.data.stories.map((article) => {
      return {
        headline: article.content.title,
        text: article.content.teaser,
        anchor: {
          // $storyblok is my plugin with helpers like this function
          to: $storyblok.getRoutePathByFullSlug(article.default_full_slug),
        },
      };
    });

  // the same for guides...
  // return..
}

We also want to feature some articles and guides in the footer. The <Footer> is a Vue component so we have to use fetch() here. I spare you the code, because it's very simliar. Only real difference lies in the mapping, because we only need the title and slug to create our nuxt-link.

2 Calls for the same data. My guts tell me that's unnecessary and violates the DRY mantra (don't repeat yourself).

One alternative is fetching the data and store it with vuex, using Nuxts nuxtServerInit(). We could fetch only what we know we will need, or we fetch all the "stories" (or posts for better understanding).

From a DX perspective, I personally don't like the double fetching we are doing right now. But from a performance perspective, I don't know if the vuex solution would even be better. Our site is static; all fetches are done during build and stored as static payload (correct me if I'm wrong), thus not affecting the clients performance at all.

Now to my actual question(s):
1. How would you fetch in this situation (and why this way)?
2. Can anybody help me understand how exactly all these fetches are stored and served in a static site? So many questions...
2a. Does every route save the entire store as a payload?
2b. Does every route using the <Footer> have it's own payload containing the guides and articles fetched inside <Footer>
2c. Does the payload for dumbo.design/insights contain both the fetch in fetch() and asyncData()?
2d. What get's saved in the payload anyways? The entire result of each call or only the mapped result that gets returned? That would make sense for asyncData(), but fetch() doesn't have a return... sooo?
3. How can I "debug" this and follow the traces myself?

After my first year with nuxt, data-fetching and the "build" are still the biggest mystery to me. _nuxt, .nuxt folder? Looking in payload.js doesn't tell me much; what is the state.js for?!

Thanks!i

[EDIT]: I've stumbled upon context.payload a few times now, but I really don't get it aswell. It feels like this feature is obsolete with Nuxt crawler. And I'm confused to why the payload property isn't mentioned in the docs – this article also looked promising, but confused me even further by also adding the store into the mix? Woudln't that double the payload sent to the client again (store + context.payload I mean)? But I guess I would need the store in order to access articles in <Footer>, right?

[EDIT 2]: How does nuxt even know about these dynamic routes during development (and after hydration) when they don't get written into .nuxt/router.js