feat(ssr): compiler-ssr support for Suspense

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

@@ -1,5 +1,7 @@
 import { createApp, h, Suspense } from 'vue'
 import { renderToString } from '../src/renderToString'
+import { ssrRenderSuspense } from '../src/helpers/ssrRenderSuspense'
+import { ssrRenderComponent } from '../src'
 
 describe('SSR Suspense', () => {
   let logError: jest.SpyInstance
@@ -24,103 +26,163 @@ describe('SSR Suspense', () => {
     }
   }
 
-  test('render', async () => {
-    const Comp = {
-      render() {
-        return h(Suspense, null, {
-          default: h(ResolvingAsync),
-          fallback: h('div', 'fallback')
-        })
-      }
-    }
-
-    expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
-    expect(logError).not.toHaveBeenCalled()
-  })
-
-  test('fallback', async () => {
-    const Comp = {
-      render() {
-        return h(Suspense, null, {
-          default: h(RejectingAsync),
-          fallback: h('div', 'fallback')
-        })
-      }
-    }
-
-    expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
-    expect(logError).toHaveBeenCalled()
-  })
-
-  test('2 components', async () => {
-    const Comp = {
-      render() {
-        return h(Suspense, null, {
-          default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
-          fallback: h('div', 'fallback')
-        })
-      }
-    }
-
-    expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><div>async</div></div>`
-    )
-    expect(logError).not.toHaveBeenCalled()
-  })
-
-  test('resolving component + rejecting component', async () => {
-    const Comp = {
-      render() {
-        return h(Suspense, null, {
-          default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
-          fallback: h('div', 'fallback')
-        })
-      }
-    }
-
-    expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
-    expect(logError).toHaveBeenCalled()
-  })
-
-  test('failing suspense in passing suspense', async () => {
-    const Comp = {
-      render() {
-        return h(Suspense, null, {
-          default: h('div', [
-            h(ResolvingAsync),
-            h(Suspense, null, {
-              default: h('div', [h(RejectingAsync)]),
-              fallback: h('div', 'fallback 2')
+  describe('compiled', () => {
+    test('basic', async () => {
+      const app = createApp({
+        ssrRender(_ctx, _push) {
+          _push(
+            ssrRenderSuspense({
+              default: _push => {
+                _push('<div>async</div>')
+              }
             })
-          ]),
-          fallback: h('div', 'fallback 1')
-        })
-      }
-    }
+          )
+        }
+      })
 
-    expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><div>fallback 2</div></div>`
-    )
-    expect(logError).toHaveBeenCalled()
+      expect(await renderToString(app)).toBe(`<div>async</div>`)
+      expect(logError).not.toHaveBeenCalled()
+    })
+
+    test('with async component', async () => {
+      const app = createApp({
+        ssrRender(_ctx, _push) {
+          _push(
+            ssrRenderSuspense({
+              default: _push => {
+                _push(ssrRenderComponent(ResolvingAsync))
+              }
+            })
+          )
+        }
+      })
+
+      expect(await renderToString(app)).toBe(`<div>async</div>`)
+      expect(logError).not.toHaveBeenCalled()
+    })
+
+    test('fallback', async () => {
+      const app = createApp({
+        ssrRender(_ctx, _push) {
+          _push(
+            ssrRenderSuspense({
+              default: _push => {
+                _push(ssrRenderComponent(RejectingAsync))
+              },
+              fallback: _push => {
+                _push('<div>fallback</div>')
+              }
+            })
+          )
+        }
+      })
+
+      expect(await renderToString(app)).toBe(`<div>fallback</div>`)
+      expect(logError).toHaveBeenCalled()
+    })
   })
 
-  test('passing suspense in failing suspense', async () => {
-    const Comp = {
-      render() {
-        return h(Suspense, null, {
-          default: h('div', [
-            h(RejectingAsync),
-            h(Suspense, null, {
-              default: h('div', [h(ResolvingAsync)]),
-              fallback: h('div', 'fallback 2')
-            })
-          ]),
-          fallback: h('div', 'fallback 1')
-        })
+  describe('vnode', () => {
+    test('content', async () => {
+      const Comp = {
+        render() {
+          return h(Suspense, null, {
+            default: h(ResolvingAsync),
+            fallback: h('div', 'fallback')
+          })
+        }
       }
-    }
 
-    expect(await renderToString(createApp(Comp))).toBe(`<div>fallback 1</div>`)
-    expect(logError).toHaveBeenCalled()
+      expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
+      expect(logError).not.toHaveBeenCalled()
+    })
+
+    test('fallback', async () => {
+      const Comp = {
+        render() {
+          return h(Suspense, null, {
+            default: h(RejectingAsync),
+            fallback: h('div', 'fallback')
+          })
+        }
+      }
+
+      expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
+      expect(logError).toHaveBeenCalled()
+    })
+
+    test('2 components', async () => {
+      const Comp = {
+        render() {
+          return h(Suspense, null, {
+            default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
+            fallback: h('div', 'fallback')
+          })
+        }
+      }
+
+      expect(await renderToString(createApp(Comp))).toBe(
+        `<div><div>async</div><div>async</div></div>`
+      )
+      expect(logError).not.toHaveBeenCalled()
+    })
+
+    test('resolving component + rejecting component', async () => {
+      const Comp = {
+        render() {
+          return h(Suspense, null, {
+            default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
+            fallback: h('div', 'fallback')
+          })
+        }
+      }
+
+      expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
+      expect(logError).toHaveBeenCalled()
+    })
+
+    test('failing suspense in passing suspense', async () => {
+      const Comp = {
+        render() {
+          return h(Suspense, null, {
+            default: h('div', [
+              h(ResolvingAsync),
+              h(Suspense, null, {
+                default: h('div', [h(RejectingAsync)]),
+                fallback: h('div', 'fallback 2')
+              })
+            ]),
+            fallback: h('div', 'fallback 1')
+          })
+        }
+      }
+
+      expect(await renderToString(createApp(Comp))).toBe(
+        `<div><div>async</div><div>fallback 2</div></div>`
+      )
+      expect(logError).toHaveBeenCalled()
+    })
+
+    test('passing suspense in failing suspense', async () => {
+      const Comp = {
+        render() {
+          return h(Suspense, null, {
+            default: h('div', [
+              h(RejectingAsync),
+              h(Suspense, null, {
+                default: h('div', [h(ResolvingAsync)]),
+                fallback: h('div', 'fallback 2')
+              })
+            ]),
+            fallback: h('div', 'fallback 1')
+          })
+        }
+      }
+
+      expect(await renderToString(createApp(Comp))).toBe(
+        `<div>fallback 1</div>`
+      )
+      expect(logError).toHaveBeenCalled()
+    })
   })
 })

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

@@ -0,0 +1,19 @@
+import { PushFn, ResolvedSSRBuffer, createBuffer } from '../renderToString'
+import { NOOP } from '@vue/shared'
+
+type ContentRenderFn = (push: PushFn) => void
+
+export async function ssrRenderSuspense({
+  default: renderContent = NOOP,
+  fallback: renderFallback = NOOP
+}: Record<string, ContentRenderFn | undefined>): Promise<ResolvedSSRBuffer> {
+  try {
+    const { push, getBuffer } = createBuffer()
+    renderContent(push)
+    return await getBuffer()
+  } catch {
+    const { push, getBuffer } = createBuffer()
+    renderFallback(push)
+    return getBuffer()
+  }
+}

packages/server-renderer/src/index.ts

@@ -14,6 +14,7 @@ export {
 export { ssrInterpolate } from './helpers/ssrInterpolate'
 export { ssrRenderList } from './helpers/ssrRenderList'
 export { ssrRenderPortal } from './helpers/ssrRenderPortal'
+export { ssrRenderSuspense } from './helpers/ssrRenderSuspense'
 
 // v-model helpers
 export {