feat(ssr-render): suspense supports server-side triggering of onResolve hooks

Author: baiwusanyu-c

packages/runtime-core/src/components/Suspense.ts

@@ -838,6 +838,7 @@ export type ssrSuspenseBoundary = {
   deps: number
   resolve: (node: VNode) => void
   vnode: VNode
+  parentSuspense: null | ssrSuspenseBoundary
 } & SuspenseBoundary
 export function createSSRSuspenseBoundary(vnode: VNode) {
   return {
@@ -846,6 +847,7 @@ export function createSSRSuspenseBoundary(vnode: VNode) {
       // invoke @resolve event
       triggerEvent(vnode, 'onResolve')
     },
-    vnode: vnode
+    vnode: vnode,
+    parentSuspense: null
   }
 }

packages/server-renderer/__tests__/render.spec.ts

@@ -927,7 +927,8 @@ function testRender(type: string, render: typeof renderToString) {
               ssrRenderVNode(
                 _push,
                 createVNode(resolveDynamicComponent('B'), null, null),
-                _parent
+                _parent,
+                null
               )
             }
           })

packages/server-renderer/__tests__/ssrSuspense.spec.ts

@@ -1,4 +1,4 @@
-import { createApp, createSSRApp, h, Suspense } from 'vue'
+import { createApp, h, Suspense } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { expect } from 'vitest'
 
@@ -164,15 +164,13 @@ describe('SSR Suspense', () => {
         return h(
           Suspense,
           {
-            id: 'ss1',
             onResolve
           },
           {
             default: h(
               Suspense,
               {
-                id: 'ss2',
-                onNestedResolve
+                onResolve: onNestedResolve
               },
               {
                 default: h(ResolvingAsync)
@@ -182,9 +180,7 @@ describe('SSR Suspense', () => {
         )
       }
     }
-    expect(await renderToString(createSSRApp(Comp))).toBe(
-      `<div><div>async</div><div>async</div></div>`
-    )
+    expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
     expect(onResolve).toHaveBeenCalledTimes(1)
     expect(onNestedResolve).toHaveBeenCalledTimes(1)
   })

packages/server-renderer/src/helpers/ssrRenderComponent.ts

@@ -12,6 +12,7 @@ export function ssrRenderComponent(
   return renderComponentVNode(
     createVNode(comp, props, children),
     parentComponent,
+    null,
     slotScopeId
   )
 }

packages/server-renderer/src/helpers/ssrRenderSlot.ts

@@ -57,7 +57,7 @@ export function ssrRenderSlotInner(
     )
     if (isArray(ret)) {
       // normal slot
-      renderVNodeChildren(push, ret, parentComponent, slotScopeId)
+      renderVNodeChildren(push, ret, parentComponent, null, slotScopeId)
     } else {
       // ssr slot.
       // check if the slot renders all comments, in which case use the fallback

packages/server-renderer/src/render.ts

@@ -91,15 +91,15 @@ export function createBuffer() {
 export function renderComponentVNode(
   vnode: VNode,
   parentComponent: ComponentInternalInstance | null = null,
-  parentSuspense: any,
+  suspense: ssrSuspenseBoundary | null = null,
   slotScopeId?: string
 ): SSRBuffer | Promise<SSRBuffer> {
   const instance = createComponentInstance(vnode, parentComponent, null)
   const res = setupComponent(instance, true /* isSSR */)
   const hasAsyncSetup = isPromise(res)
   const prefetches = instance.sp /* LifecycleHooks.SERVER_PREFETCH */
   if (hasAsyncSetup || prefetches) {
-    parentSuspense && parentSuspense.deps++
+    suspense && suspense.deps++
     let p: Promise<unknown> = hasAsyncSetup
       ? (res as Promise<void>)
       : Promise.resolve()
@@ -113,27 +113,32 @@ export function renderComponentVNode(
     }
 
     return p.then(() => {
-      const subtree = renderComponentSubTree(
-        instance,
-        parentSuspense,
-        slotScopeId
-      )
-      if (__FEATURE_SUSPENSE__ && parentSuspense) {
-        parentSuspense.deps--
-        if (parentSuspense.deps === 0) {
-          parentSuspense.resolve(parentSuspense.vnode)
+      const subtree = renderComponentSubTree(instance, suspense, slotScopeId)
+      if (__FEATURE_SUSPENSE__ && suspense) {
+        // resolve suspense
+        suspense.deps--
+        if (suspense.deps <= 0) {
+          suspense.resolve(suspense.vnode)
+        }
+
+        // resolve parent suspense
+        if (suspense.parentSuspense) {
+          suspense.parentSuspense.deps--
+          if (suspense.deps <= 0) {
+            suspense.parentSuspense.resolve(suspense.parentSuspense.vnode)
+          }
         }
       }
       return subtree
     })
   } else {
-    return renderComponentSubTree(instance, parentSuspense, slotScopeId)
+    return renderComponentSubTree(instance, suspense, slotScopeId)
   }
 }
 
 function renderComponentSubTree(
   instance: ComponentInternalInstance,
-  parentSuspense: any,
+  parentSuspense: ssrSuspenseBoundary | null,
   slotScopeId?: string
 ): SSRBuffer | Promise<SSRBuffer> {
   const comp = instance.type as Component
@@ -226,6 +231,7 @@ function renderComponentSubTree(
         push,
         (instance.subTree = renderComponentRoot(instance)),
         instance,
+        parentSuspense,
         slotScopeId
       )
     } else {
@@ -241,7 +247,7 @@ export function renderVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  parentSuspense: any,
+  parentSuspense: ssrSuspenseBoundary | null = null,
   slotScopeId?: string
 ) {
   const { type, shapeFlag, children } = vnode
@@ -305,27 +311,24 @@ export function renderVNode(
           ) as ssrSuspenseBoundary
         }
 
-        // nested ???
-        // if (parentSuspense) {
-        //   parentSuspense.deps++
-        // }
+        // nested suspense
+        if (parentSuspense) {
+          parentSuspense.deps++
+          ;(vnode.suspense as ssrSuspenseBoundary).parentSuspense =
+            parentSuspense
+        }
         renderVNode(
           push,
           vnode.ssContent!,
           parentComponent,
-          vnode.suspense,
+          vnode.suspense as ssrSuspenseBoundary,
           slotScopeId
         )
 
         // sync
         if (vnode.suspense && vnode.suspense.deps! <= 0) {
           ;(vnode.suspense as ssrSuspenseBoundary).resolve(vnode)
         }
-
-        // nested ???
-        // if (parentSuspense) {
-        //   parentSuspense.deps--
-        // }
       } else {
         warn(
           '[@vue/server-renderer] Invalid VNode type:',
@@ -340,7 +343,7 @@ export function renderVNodeChildren(
   push: PushFn,
   children: VNodeArrayChildren,
   parentComponent: ComponentInternalInstance,
-  parentSuspense: any,
+  parentSuspense: ssrSuspenseBoundary | null,
   slotScopeId: string | undefined
 ) {
   for (let i = 0; i < children.length; i++) {
@@ -358,7 +361,7 @@ function renderElementVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  parentSuspense: any,
+  parentSuspense: ssrSuspenseBoundary | null,
   slotScopeId: string | undefined
 ) {
   const tag = vnode.type as string
@@ -445,7 +448,7 @@ function renderTeleportVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  parentSuspense: any,
+  parentSuspense: ssrSuspenseBoundary | null,
   slotScopeId: string | undefined
 ) {
   const target = vnode.props && vnode.props.to