diff --git a/packages/server-renderer/__tests__/ssrComputed.spec.ts b/packages/server-renderer/__tests__/ssrComputed.spec.ts index 52b45a636..df27c4e2f 100644 --- a/packages/server-renderer/__tests__/ssrComputed.spec.ts +++ b/packages/server-renderer/__tests__/ssrComputed.spec.ts @@ -1,4 +1,11 @@ -import { createSSRApp, defineComponent, h, computed, reactive } from 'vue' +import { + createSSRApp, + defineComponent, + h, + computed, + reactive, + onServerPrefetch +} from 'vue' import { renderToString } from '../src/renderToString' // #5208 reported memory leak of keeping computed alive during SSR @@ -45,3 +52,42 @@ test('computed reactivity during SSR', async () => { // during the render phase expect(getterSpy).toHaveBeenCalledTimes(2) }) + +test('computed reactivity during SSR with onServerPrefetch', async () => { + const store = { + // initial state could be hydrated + state: reactive({ items: null as null | string[] }), + + // pretend to fetch some data from an api + async fetchData() { + this.state.items = ['hello', 'world'] + } + } + + const getterSpy = vi.fn() + + const App = defineComponent(() => { + const msg = computed(() => { + getterSpy() + return store.state.items?.join(' ') + }) + + onServerPrefetch(() => store.fetchData()) + + // simulate the read from a composable (e.g. filtering a list of results) + msg.value + + return () => h('div', null, msg.value) + }) + + const app = createSSRApp(App) + + // in real world serve this html and append store state for hydration on client + const html = await renderToString(app) + + expect(html).toMatch('hello world') + + // should only be called twice since access should be cached + // during the render phase + expect(getterSpy).toHaveBeenCalledTimes(2) +})