fix(ssr): avoid computed being accidentally cached before server render (#9688)

close #5300

diff --git a/packages/server-renderer/__tests__/render.spec.ts b/packages/server-renderer/__tests__/render.spec.ts
index 0abaebf088e91aab63d9e4df81a92632932ae2ed..1899c76708584359e4b9569f92945227e6940c94 100644 (file)
--- 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 5c5850e006dd06c1a78ed6c6656e506be40c719a..52b45a63636880c9086f0bc1b2346b8c6378de42 100644 (file)
--- 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 a1f327b4320931502304ad4903abf25e1df1a74b..011d0840386ba474da0c32de04c15c2b9b77d395 100644 (file)
--- 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