feat(asyncComponent): SSR/hydration support for async component

packages/runtime-core/src/apiAsyncComponent.ts

@@ -3,7 +3,8 @@ import {
   Component,
   currentSuspense,
   currentInstance,
-  ComponentInternalInstance
+  ComponentInternalInstance,
+  isInSSRComponentSetup
 } from './component'
 import { isFunction, isObject, EMPTY_OBJ } from '@vue/shared'
 import { ComponentPublicInstance } from './componentProxy'
@@ -67,6 +68,7 @@ export function createAsyncComponent<
   }
 
   return defineComponent({
+    __asyncLoader: load,
     name: 'AsyncComponentWrapper',
     setup() {
       const instance = currentInstance!
@@ -76,18 +78,29 @@ export function createAsyncComponent<
         return () => createInnerComp(resolvedComp!, instance)
       }
 
-      // suspense-controlled
-      if (__FEATURE_SUSPENSE__ && suspensible && currentSuspense) {
-        return load().then(comp => {
-          return () => createInnerComp(comp, instance)
-        })
-        // TODO suspense error handling
+      const onError = (err: Error) => {
+        pendingRequest = null
+        handleError(err, instance, ErrorCodes.ASYNC_COMPONENT_LOADER)
       }
 
-      // self-controlled
-      if (__NODE_JS__) {
-        // TODO SSR
+      // suspense-controlled or SSR.
+      if (
+        (__FEATURE_SUSPENSE__ && suspensible && currentSuspense) ||
+        (__NODE_JS__ && isInSSRComponentSetup)
+      ) {
+        return load()
+          .then(comp => {
+            return () => createInnerComp(comp, instance)
+          })
+          .catch(err => {
+            onError(err)
+            return () =>
+              errorComponent
+                ? createVNode(errorComponent as Component, { error: err })
+                : null
+          })
       }
+
       // TODO hydration
 
       const loaded = ref(false)
@@ -106,11 +119,8 @@ export function createAsyncComponent<
             const err = new Error(
               `Async component timed out after ${timeout}ms.`
             )
-            if (errorComponent) {
-              error.value = err
-            } else {
-              handleError(err, instance, ErrorCodes.ASYNC_COMPONENT_LOADER)
-            }
+            onError(err)
+            error.value = err
           }
         }, timeout)
       }
@@ -120,12 +130,8 @@ export function createAsyncComponent<
           loaded.value = true
         })
         .catch(err => {
-          pendingRequest = null
-          if (errorComponent) {
-            error.value = err
-          } else {
-            handleError(err, instance, ErrorCodes.ASYNC_COMPONENT_LOADER)
-          }
+          onError(err)
+          error.value = err
         })
 
       return () => {