feat: onServerPrefetch

Author: Akryum

packages/runtime-core/src/apiLifecycle.ts

@@ -1,5 +1,6 @@
 import {
   ComponentInternalInstance,
+  ComponentOptions,
   currentInstance,
   isInSSRComponentSetup,
   LifecycleHooks,
@@ -95,3 +96,31 @@ export const onErrorCaptured = (
 ) => {
   injectHook(LifecycleHooks.ERROR_CAPTURED, hook, target)
 }
+
+export function onServerPrefetch<
+  T extends () => Promise<any> = () => Promise<unknown>
+>(handler: T) {
+  const target = currentInstance
+  if (target) {
+    if (isInSSRComponentSetup) {
+      const type = target.type as ComponentOptions
+      let hook = type.serverPrefetch
+      if (hook) {
+        // Merge hook
+        type.serverPrefetch = () => handler().then(() => (hook as Function)())
+      } else {
+        type.serverPrefetch = handler
+      }
+    }
+  } else if (__DEV__) {
+    warn(
+      `onServerPrefetch is called when there is no active component instance to be ` +
+        `associated with. ` +
+        `Lifecycle injection APIs can only be used during execution of setup().` +
+        (__FEATURE_SUSPENSE__
+          ? ` If you are using async setup(), make sure to register lifecycle ` +
+            `hooks before the first await statement.`
+          : ``)
+    )
+  }
+}

packages/runtime-core/src/index.ts

@@ -37,7 +37,8 @@ export {
   onDeactivated,
   onRenderTracked,
   onRenderTriggered,
-  onErrorCaptured
+  onErrorCaptured,
+  onServerPrefetch
 } from './apiLifecycle'
 export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'

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

@@ -8,7 +8,8 @@ import {
   ref,
   defineComponent,
   createTextVNode,
-  createStaticVNode
+  createStaticVNode,
+  onServerPrefetch
 } from 'vue'
 import { escapeHtml } from '@vue/shared'
 import { renderToString } from '../src/renderToString'
@@ -715,5 +716,51 @@ function testRender(type: string, render: typeof renderToString) {
       const html = await render(app)
       expect(html).toBe(`<div>hello</div>`)
     })
+
+    test('onServerPrefetch', async () => {
+      const msg = Promise.resolve('hello')
+      const app = createApp({
+        setup() {
+          const message = ref('')
+          onServerPrefetch(async () => {
+            message.value = await msg
+          })
+          return {
+            message
+          }
+        },
+        render() {
+          return h('div', this.message)
+        }
+      })
+      const html = await render(app)
+      expect(html).toBe(`<div>hello</div>`)
+    })
+
+    test('multiple onServerPrefetch', async () => {
+      const msg = Promise.resolve('hello')
+      const msg2 = Promise.resolve('hi')
+      const app = createApp({
+        setup() {
+          const message = ref('')
+          const message2 = ref('')
+          onServerPrefetch(async () => {
+            message.value = await msg
+          })
+          onServerPrefetch(async () => {
+            message2.value = await msg2
+          })
+          return {
+            message,
+            message2
+          }
+        },
+        render() {
+          return h('div', `${this.message} ${this.message2}`)
+        }
+      })
+      const html = await render(app)
+      expect(html).toBe(`<div>hello hi</div>`)
+    })
   })
 }