fix(ssr): only cache computed getters during render phase

fix #5300

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

@@ -0,0 +1,48 @@
+import { createSSRApp, defineComponent, h, computed, reactive } from 'vue'
+import { renderToString } from '../src/renderToString'
+
+// #5208 reported memory leak of keeping computed alive during SSR
+// so we made computed properties created during SSR non-reactive in
+// https://github.com/vuejs/core/commit/f4f0966b33863ac0fca6a20cf9e8ddfbb311ae87
+// However, the default caching leads to #5300 which is tested below.
+// In Vue 2, computed properties are simple getters during SSR - this can be
+// inefficient if an expensive computed is accessed multiple times during render,
+// but because of potential mutations, we cannot cache it until we enter the
+// render phase (where no mutations can happen anymore)
+test('computed reactivity during SSR', async () => {
+  const store = {
+    // initial state could be hydrated
+    state: reactive({ items: null }) as any,
+
+    // pretend to fetch some data from an api
+    async fetchData() {
+      this.state.items = ['hello', 'world']
+    }
+  }
+
+  const getterSpy = jest.fn()
+
+  const App = defineComponent(async () => {
+    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.
+    if (!msg.value) await store.fetchData()
+
+    expect(msg.value).toBe('hello world')
+    return () => h('div', null, msg.value + msg.value + msg.value)
+  })
+
+  const app = createSSRApp(App)
+
+  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)
+})

packages/server-renderer/src/render.ts

@@ -128,6 +128,12 @@ function renderComponentSubTree(
       comp.ssrRender = ssrCompile(comp.template, instance)
     }
 
+    // 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
+    }
+
     const ssrRender = instance.ssrRender || comp.ssrRender
     if (ssrRender) {
       // optimized