Skip to content

Commit

Permalink
fix(ssr): avoid computed being accidentally cached before server rend…
Browse files Browse the repository at this point in the history
…er (#9688)

close #5300
  • Loading branch information
edison1105 authored and yyx990803 committed Dec 1, 2023
1 parent 8d74ca0 commit 30d5d93
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 3 deletions.
47 changes: 46 additions & 1 deletion packages/server-renderer/__tests__/render.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)
})
})
}
1 change: 0 additions & 1 deletion packages/server-renderer/__tests__/ssrComputed.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})

Expand Down
5 changes: 4 additions & 1 deletion packages/server-renderer/src/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 30d5d93

Please sign in to comment.