feat(vue-app): support custom fetchKey for full static generation

[danielroe]

Is your feature request related to a problem? Please describe.

At the moment, fetch payloads are assigned to the components that need them through a sequential method. When a page changes, the payload array is loaded and a global fetchKey is initialised to 0. As components are created and need data, this key increases and the relevant array item is injected into each component.

This poses a problem when components persist between pages, such as when there is a parent/child page, or if a user would like to use fetch in a global layout. In this case, the persistent component never rerenders, and so the component that would normally be keyed 1 is assigned the 0-indexed payload, and so on.

Describe the solution you'd like

We can improve hydration by:

1. Keying fetch payloads with a non-numeric fetchKey. This will default to the scope ID (if the component uses scoped CSS), the component name, if there is one, or an auto-incrementing number (as at present).

2. Allow the user to manually take control of the fetch hydration process, by specifying their own fetchKey

   export default {
     async fetch () {
       this.title = await fetch('/api/title').then(r => r.json())
     },
     // multiple components can return the same `fetchKey` and Nuxt will track them both separately 
     fetchKey: 'site-sidebar',
     // alternatively, for more control, a function can be passed with access to the component instance
     // It will be called in `created` and obviously must not depend on fetched data
     fetchKey (getCounter) {
       // getCounter is a method that can be called to get the next number in a sequence
       // as part of generating a unique fetchKey. 
       return this.someOtherData + getCounter('sidebar')
     }
   } 

Additional context

Will close #7563, #7791, #7799, #8107, #8150, #8193.

[danielroe]

closed in #8466 - should be available soon on nuxt-edge and 2.15.0 release