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 () => {

packages/runtime-core/src/apiOptions.ts

@@ -4,7 +4,8 @@ import {
   SetupContext,
   RenderFunction,
   SFCInternalOptions,
-  PublicAPIComponent
+  PublicAPIComponent,
+  Component
 } from './component'
 import {
   isFunction,
@@ -77,6 +78,8 @@ export interface ComponentOptionsBase<
   // type-only differentiator to separate OptionWithoutProps from a constructor
   // type returned by defineComponent() or FunctionalComponent
   call?: never
+  // marker for AsyncComponentWrapper
+  __asyncLoader?: () => Promise<Component>
   // type-only differentiators for built-in Vnode types
   __isFragment?: never
   __isPortal?: never

packages/runtime-core/src/hydration.ts

@@ -24,6 +24,7 @@ import {
   SuspenseBoundary,
   queueEffectWithSuspense
 } from './components/Suspense'
+import { ComponentOptions } from './apiOptions'
 
 export type RootHydrateFunction = (
   vnode: VNode<Node, Element>,
@@ -154,14 +155,23 @@ export function createHydrationFunctions(
           // has .el set, the component will perform hydration instead of mount
           // on its sub-tree.
           const container = parentNode(node)!
-          mountComponent(
-            vnode,
-            container,
-            null,
-            parentComponent,
-            parentSuspense,
-            isSVGContainer(container)
-          )
+          const hydrateComponent = () => {
+            mountComponent(
+              vnode,
+              container,
+              null,
+              parentComponent,
+              parentSuspense,
+              isSVGContainer(container)
+            )
+          }
+          // async component
+          const loadAsync = (vnode.type as ComponentOptions).__asyncLoader
+          if (loadAsync) {
+            loadAsync().then(hydrateComponent)
+          } else {
+            hydrateComponent()
+          }
           // component may be async, so in the case of fragments we cannot rely
           // on component's rendered output to determine the end of the fragment
           // instead, we do a lookahead to find the end anchor node.