Static GitHub Issues

[2623] parent/child page initialization in series

prev: transition-group doesn't work with nuxt-link v-for loop
next: Debug files with VSCODE Chrome Debug

It seems that the parent page, and all child pages do their validate, asyncData, and fetch calls in parallel. This means that if I have a child _post page that needs to validate the ID, I cannot assume the parent posts page has already loaded the posts array to check against. So while the parent posts page is making an asynData request, the child post page is making its own request for the same data (for validation). This can result is many unnecessary data fetches (between parent page/child page). It can also create race conditions to read/write to the store.

Is there a way to toggle the layout / page initialization to run in series? Meaning, the parent page would run it's validate / asyncData / fetch. Then the child page. Then the child's child page, etc.. This would allow the child page to depend on certain data already being set by the parent page. Maybe an await: true for waiting till the parent parent has finished initializing?

Worth noting, using nuxtServerInit is a sort of work around. This actually does happen before any pages start validating or calling asyncData / fetch. This means that you can do something like this:

async nuxtServerInit (store, context) {
  if (_.startsWith(context.route.name, 'dashboard-foo')) {
    await store.dispatch('fooDashboard/fetchInitialState', { fooId: context.route.params.foo })
  }
}

This will load the initial state for that page (and any of its children), so that validations have something to validate against. The downside though, is that it requires loading more data than potentially needed upfront (slowing page load). With GraphQL that can be somewhat mitigated. Still, I think validating / fetching pages in series would be a cleaner way to solve this issue.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2282">#c2282</a>)</em></sub></div>