Clean up hook for memoization after server side rendering #8066

justin-schroeder · 2023-04-11T20:40:57Z

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.

The text was updated successfully, but these errors were encountered:

posva · 2023-08-09T07:57:41Z

Related to #4516

justin-schroeder added the ✨ feature request New feature or request label Apr 11, 2023

This comment was marked as off-topic.

Sign in to view

justin-schroeder mentioned this issue Apr 26, 2023

SSR Memory Fixes formkit/formkit#674

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clean up hook for memoization after server side rendering #8066

Clean up hook for memoization after server side rendering #8066

justin-schroeder commented Apr 11, 2023 •

edited

Loading

This comment was marked as off-topic.

posva commented Aug 9, 2023

Clean up hook for memoization after server side rendering #8066

Clean up hook for memoization after server side rendering #8066

Comments

justin-schroeder commented Apr 11, 2023 • edited Loading

What problem does this feature solve?

What does the proposed API look like?

Proposal: onDestroyed

Possible alternative?

This comment was marked as off-topic.

posva commented Aug 9, 2023

justin-schroeder commented Apr 11, 2023 •

edited

Loading

Proposal: `onDestroyed`