Render pending async props when server rendering

The wrapper a view's pending props go through was chosen by reading the instance's
suspense property, which is client only and always false while server rendering. The
server therefore always got the wrapper that fills a ref from a promise handler, which
the server renderer never awaits, so a view with an async props getter rendered nothing.

Choose the awaiting wrapper when vue's ssr context is present instead. The server
renderer awaits async setup whether or not a Suspense boundary exists, so this needs
nothing from the app.

Author: pleek91

src/components/routerView.spec.ts

@@ -1,9 +1,14 @@
-import { createSSRApp } from 'vue'
+/* eslint-disable vue/one-component-per-file */
+import { createSSRApp, defineComponent, h } from 'vue'
 import { describe, it, expect } from 'vitest'
 import { createRoute } from '@/services/createRoute'
 import { createRouter } from '@/services/createRouter'
 import { renderToString } from 'vue/server-renderer'
 
+const sleep = (ms: number): Promise<void> => new Promise((resolve) => {
+  setTimeout(resolve, ms)
+})
+
 describe('SSR', () => {
   it('should render the route', async () => {
     const route = createRoute({
@@ -26,4 +31,63 @@ describe('SSR', () => {
 
     expect(html).toMatchInlineSnapshot('"hello world"')
   })
+
+  it('renders pending async props without Suspense and without render', async () => {
+    const view = defineComponent({
+      props: { name: { type: String, required: true } },
+      setup: (props) => () => h('div', `hello ${props.name}`),
+    })
+
+    const route = createRoute({ name: 'user', path: '/' })
+      .addView(view, {
+        props: async () => {
+          await sleep(20)
+
+          return { name: 'craig' }
+        },
+      })
+
+    const router = createRouter([route], { initialUrl: '/' })
+
+    const app = createSSRApp({
+      template: '<RouterView/>',
+    })
+
+    app.use(router)
+
+    await router.start()
+
+    const html = await renderToString(app)
+
+    expect(html).toBe('<div>hello craig</div>')
+  })
+
+  it('renders pending loader data without Suspense and without render', async () => {
+    const view = defineComponent({
+      props: { name: { type: String, required: true } },
+      setup: (props) => () => h('div', `loaded ${props.name}`),
+    })
+
+    const route = createRoute({ name: 'user', path: '/' })
+      .addLoader(async () => {
+        await sleep(20)
+
+        return 'craig'
+      })
+      .addView(view, { props: async (route) => ({ name: await route.data }) })
+
+    const router = createRouter([route], { initialUrl: '/' })
+
+    const app = createSSRApp({
+      template: '<RouterView/>',
+    })
+
+    app.use(router)
+
+    await router.start()
+
+    const html = await renderToString(app)
+
+    expect(html).toBe('<div>loaded craig</div>')
+  })
 })

src/compositions/useHasSuspenseBoundary.ts

@@ -0,0 +1,12 @@
+import { getCurrentInstance } from 'vue'
+
+/**
+ * Must be called during setup. Vue has no public api for this: the public `VNode.suspense` is not the
+ * enclosing boundary and reads false inside one, and a boundary never appears in the `parent` chain.
+ */
+export function useHasSuspenseBoundary(): boolean {
+  const instance = getCurrentInstance()
+
+  // @ts-expect-error suspense is not on the public ComponentInternalInstance type
+  return Boolean(instance?.suspense)
+}

src/compositions/useIsServerRendering.browser.spec.ts

@@ -0,0 +1,29 @@
+import { createSSRApp, defineComponent, h } from 'vue'
+import { expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { useIsServerRendering } from '@/compositions/useIsServerRendering'
+
+const component = defineComponent({
+  setup() {
+    const isServerRendering = useIsServerRendering()
+
+    return () => h('div', String(isServerRendering))
+  },
+})
+
+test('is false on the client', () => {
+  const wrapper = mount({ render: () => h(component) })
+
+  expect(wrapper.text()).toBe('false')
+})
+
+test('is false while hydrating through createSSRApp', () => {
+  const element = document.createElement('div')
+
+  element.innerHTML = '<div>true</div>'
+  document.body.appendChild(element)
+
+  createSSRApp({ render: () => h(component) }).mount(element)
+
+  expect(element.textContent).toBe('false')
+})

src/compositions/useIsServerRendering.spec.ts

@@ -0,0 +1,18 @@
+import { createSSRApp, defineComponent, h } from 'vue'
+import { expect, test } from 'vitest'
+import { renderToString } from 'vue/server-renderer'
+import { useIsServerRendering } from '@/compositions/useIsServerRendering'
+
+test('is true while server rendering', async () => {
+  const component = defineComponent({
+    setup() {
+      const isServerRendering = useIsServerRendering()
+
+      return () => h('div', String(isServerRendering))
+    },
+  })
+
+  const html = await renderToString(createSSRApp({ render: () => h(component) }))
+
+  expect(html).toBe('<div>true</div>')
+})

src/compositions/useIsServerRendering.ts

@@ -0,0 +1,12 @@
+import { inject, InjectionKey, ssrContextKey } from 'vue'
+
+// vue exports this as a bare symbol, so it needs typing for inject to report whether it is there
+const SSR_CONTEXT_KEY = ssrContextKey as InjectionKey<Record<string, unknown>>
+
+/**
+ * True under `renderToString`, false on the client including while hydrating through `createSSRApp`.
+ * Must be called during setup.
+ */
+export function useIsServerRendering(): boolean {
+  return inject(SSR_CONTEXT_KEY, null) !== null
+}

src/services/component.browser.spec.ts

@@ -3,7 +3,8 @@ import { expect, test } from 'vitest'
 import echo from '@/components/echo'
 import { createRoute } from '@/services/createRoute'
 import { createRouter } from '@/services/createRouter'
-import { h, defineComponent, getCurrentInstance } from 'vue'
+import { h, defineComponent } from 'vue'
+import { useHasSuspenseBoundary } from '@/compositions/useHasSuspenseBoundary'
 
 test('renders component with sync props', async () => {
   const route = createRoute({
@@ -64,11 +65,10 @@ test('renders component with async props', async () => {
   expect(wrapper.html()).toBe('echo')
 })
 
-test('component instance has suspense property when suspense is used', async () => {
+test('useHasSuspenseBoundary reports whether suspense is used', async () => {
   const testComponent = defineComponent({
     setup() {
-      // @ts-expect-error there isn't a way to check if suspense is used in the component without accessing a private property
-      const hasSuspense = Boolean(getCurrentInstance()?.suspense)
+      const hasSuspense = useHasSuspenseBoundary()
 
       return () => h('span', hasSuspense)
     },

src/services/component.ts

@@ -1,11 +1,13 @@
 /* eslint-disable vue/require-prop-types */
 /* eslint-disable vue/one-component-per-file */
-import { AsyncComponentLoader, Component, FunctionalComponent, InjectionKey, defineComponent, getCurrentInstance, h, ref, watch } from 'vue'
+import { AsyncComponentLoader, Component, FunctionalComponent, InjectionKey, defineComponent, h, ref, watch } from 'vue'
 import { isPromise } from '@/utilities/promises'
 import { PropsResult } from '@/utilities/props'
 import { createUseRouteValueStore } from '@/compositions/useRouteValueStore'
 import { Router } from '@/types/router'
 import { createUseRoute } from '@/compositions/useRoute'
+import { useIsServerRendering } from '@/compositions/useIsServerRendering'
+import { useHasSuspenseBoundary } from '@/compositions/useHasSuspenseBoundary'
 
 type Constructor = new (...args: any) => any
 
@@ -31,16 +33,16 @@ export function createComponentPropsWrapper(routerKey: InjectionKey<Router>, { i
     name: 'PropsWrapper',
     expose: [],
     setup() {
-      const instance = getCurrentInstance()
       const store = useRouteValueStore()
       const route = useRoute()
+      const isServerRendering = useIsServerRendering()
+      const hasSuspenseBoundary = useHasSuspenseBoundary()
 
       return () => {
         const result = store.getProps(id, name, route)
 
         if (isPromise(result)) {
-          // @ts-expect-error there isn't a way to check if suspense is used in the component without accessing a private property
-          if (instance?.suspense) {
+          if (isServerRendering || hasSuspenseBoundary) {
             return h(SuspenseAsyncComponentPropsWrapper, { component, props: result })
           }