Added call of asyncData functions of children of resolved component while server rendering

front/client/entry.server.ts

@@ -2,13 +2,13 @@ import 'reflect-metadata'
 import _get from 'lodash/get'
 import { createApp } from './app'
 
-export default context => {
+export default async context => {
   return new Promise((resolve, reject) => {
     const { app, router, store } = createApp()
 
     router.push(context.url)
 
-    router.onReady(() => {
+    router.onReady(async () => {
       const matchedComponents = router.getMatchedComponents()
 
       if (!matchedComponents.length) {
@@ -17,21 +17,43 @@ export default context => {
           error: new Error('no component matched')
         })
       }
+      try {
+        const matchedComponentsAndChildren = matchedComponents
+          .reduce((acc, matchedComponent) => {
+            const componentAndItsChildren = getComponentAndItsChildren(matchedComponent)
+            acc = acc.concat(componentAndItsChildren)
+            return acc
+          }, [])
 
-      Promise.all(matchedComponents.map((Component) => {
-        const asyncDataFunc = Component['asyncData']
-          || _get(Component, 'options.asyncData')
-          || _get(Component, 'options.methods.asyncData')
-        if (typeof asyncDataFunc === 'function') {
-          return asyncDataFunc({
-            store,
-            route: router.currentRoute
-          })
-        }
-      })).then(() => {
+        await Promise.all(matchedComponentsAndChildren.map((Component) => {
+          const asyncDataFunc = _get(Component, 'options.methods.asyncData')
+          if (typeof asyncDataFunc === 'function') {
+            return asyncDataFunc({
+              store,
+              route: router.currentRoute
+            })
+          }
+        }))
         context.state = store.state
         resolve(app)
-      }).catch(reject)
+      } catch (e) {
+        reject
+      }
     }, reject)
   })
 }
+
+function getComponentAndItsChildren(component, result?) {
+  if (!result) {
+    result = []
+  }
+  if (!result.includes(component)) {
+    result.push(component)
+  }
+  const children = Object.values(component.options.components)
+    // Parent component is also presents in components object
+    .filter(x => x !== component)
+  children.forEach(x => getComponentAndItsChildren(x, result))
+
+  return result
+}