diff --git a/packages/server-renderer/__tests__/render.spec.ts b/packages/server-renderer/__tests__/render.spec.ts index 0abaebf088e..1899c767085 100644 --- a/packages/server-renderer/__tests__/render.spec.ts +++ b/packages/server-renderer/__tests__/render.spec.ts @@ -17,7 +17,10 @@ import { renderSlot, onErrorCaptured, onServerPrefetch, - getCurrentInstance + getCurrentInstance, + reactive, + computed, + createSSRApp } from 'vue' import { escapeHtml } from '@vue/shared' import { renderToString } from '../src/renderToString' @@ -1140,5 +1143,47 @@ function testRender(type: string, render: typeof renderToString) { expect(renderError).toBe(null) expect((capturedError as unknown as Error).message).toBe('An error') }) + + 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(' ') + }) + + // If msg value is falsy then we are either in ssr context or on the client + // and the initial state was not modified/hydrated. + // In both cases we need to fetch data. + 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) + }) }) } diff --git a/packages/server-renderer/__tests__/ssrComputed.spec.ts b/packages/server-renderer/__tests__/ssrComputed.spec.ts index 5c5850e006d..52b45a63636 100644 --- a/packages/server-renderer/__tests__/ssrComputed.spec.ts +++ b/packages/server-renderer/__tests__/ssrComputed.spec.ts @@ -33,7 +33,6 @@ test('computed reactivity during SSR', async () => { // In both cases we need to fetch data. if (!msg.value) await store.fetchData() - expect(msg.value).toBe('hello world') return () => h('div', null, msg.value + msg.value + msg.value) }) diff --git a/packages/server-renderer/src/render.ts b/packages/server-renderer/src/render.ts index a1f327b4320..011d0840386 100644 --- a/packages/server-renderer/src/render.ts +++ b/packages/server-renderer/src/render.ts @@ -144,7 +144,10 @@ function renderComponentSubTree( // perf: enable caching of computed getters during render // since there cannot be state mutations during render. for (const e of instance.scope.effects) { - if (e.computed) e.computed._cacheable = true + if (e.computed) { + e.computed._dirty = true + e.computed._cacheable = true + } } const ssrRender = instance.ssrRender || comp.ssrRender