Clean up hook for memoization after server side rendering
What problem does this feature solve?
For performance it can be helpful to memoize the result of expensive operations within the module scope of an imported script. Lifecycle hooks on the front end (like onUnmounted) allow for this kind of cleanup, but currently there is no lifecycle hook to perform this operation on the server. Take for example:
// expensive.ts
const memo: Record<string, ExpensiveValue> = {}
const memoKeyTotals: Record<string, number> = {}
export function performExpensiveOperation (info: string): [ExpensiveValue, CleanUp] {
if (!memo[info]) {
memo[info] = doExpensiveOperation(info)
memoKeyTotals[info] = 0
} else {
memoKeyTotals[info]++
}
const clean = () => {
memoKeyTotals--
if (!memoKeyTotals) {
delete memoKeyTotaks[info]
delete memo[info]
}
}
return [memo[info], clean]
}
The ExpensiveComponent.vue file:
<script setup>
import { onUnmounted } from 'vue'
import { performExpensiveOperation } from './expensive'
const props = defineProps(['info'])
const [value, cleanUp] = performExpensiveOperation(props.info)
// onUnmounted doesn’t run on the server so GC is never run.
onUnmounted(cleanUp)
</script>
<template>
{{ value }}
</template>
What does the proposed API look like?
Proposal: onDestroyed
A lifecycle hook that is universally called after server and client render. Perhaps called onDestroyed().
<script setup>
import { onDestroyed } from 'vue'
import { performExpensiveOperation } from './expensive'
const props = defineProps(['info'])
const [value, cleanUp] = performExpensiveOperation(props.info)
onDestroyed(cleanUp). // đź‘€ Called on the client and the server
</script>
<template>
{{ value }}
</template>
Depending on the mechanics of the server, it may necessary to indicate the finality of an app’s lifecycle to reliably perform the onDestroyed hook:
// server.mjs
import { createSSRApp } from 'vue'
import { renderToString, destroy } from '@vue/server-renderer'
const server = http.createServer((req, res) => {
// Creates a new app on each request for context isolation:
const app = createSSRApp({
template: '<ExpensiveComponent />',
})
renderToString(app).then((html) => {
destroy(app)
res.statusCode = 200
res.setHeader('Content-Type', 'text/html')
res.end(`<!DOCTYPE />
<html>
${html}
</html>`)
})
})
On the client this hook would be executed after all existing lifecycle hooks.
Possible alternative?
Node 14.6 added the FinalizationRegistry API which could theoretically be used server side to detect when an object within a component’s scope is garbage collected and trigger the appropriate cleanup operation.
curl https://api.openai.com/v1/files
-H "Authorization: Bearer $OPENAI_API_KEY"
-F purpose="fine-tune"
-F file="@mydata.jsonl"
Related to https://github.com/vuejs/core/issues/4516