[Bug Report][3.0.0] Memory leak during ssr in nuxt

[tobiasklemp]

Environment

Vuetify Version: 3.0.0
Vue Version: 3.2.45
Browsers: Chrome 107.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Environment

• Operating System: Darwin
• Node Version: v16.13.2
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: css, build, vite
• Runtime Modules: -
• Build Modules: -

Reproduction

Clone this minimal starter project:
https://github.com/CodyBontecou/nuxt3-and-vuetify

do a

yarn 
yarn build

Then run the build with

node --expose-gc --inspect .output/server/index.mjs

Open the devtools and watch the memory tab.

I used k6 to run a small load test against my project:

import http from 'k6/http'
import { sleep } from 'k6'

export const options = {
  stages: [
    { duration: '20s', target: 100 }, // simulate ramp-up of traffic from 1 to 100 users over 5 minutes.
    { duration: '20s', target: 100 }, // stay at 100 users for 10 minutes
    { duration: '20s', target: 0 }, // ramp-down to 0 users
  ],
}

const BASE_URL = 'http://localhost:3000'

export default () => {
  http.get(`${BASE_URL}`)
  sleep(1)
}

Describe the bug

After running the test, about 160 mb of ram get stuck, indicating that something is leaking. After some investigation it appears to be related with the usage of the head composable in combination with a computed value outside of a component context.

This is the relevant code, which is causing the leak:

// node_modules/vuetify/lib/composables/theme.mjs
function install(app) {
    const head = app._context.provides.usehead;
    if (head) {
      head.addHeadObjs(computed(() => {
        const style = {
          children: styles.value,
          type: 'text/css',
          id: 'vuetify-theme-stylesheet'
        };
        if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
        return {
          style: [style]
        };
      }));
      if (IN_BROWSER) {
        watchEffect(() => head.updateDOM());
      }
    } else {
      let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
      watch(styles, updateStyles, {
        immediate: true
      });
      function updateStyles() {
        if (parsedOptions.isDisabled) return;
        if (typeof document !== 'undefined' && !styleEl) {
          const el = document.createElement('style');
          el.type = 'text/css';
          el.id = 'vuetify-theme-stylesheet';
          if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce);
          styleEl = el;
          document.head.appendChild(styleEl);
        }
        if (styleEl) styleEl.innerHTML = styles.value;
      }
    }
  }

I found this issue which also indicates that this is a problem, but I don't know how i would be able to use vuetify during ssr.

Expected Behavior

Run without leaking memory.

Actual Behavior

It is leaking a quite significant amount of memory.

Reproduction Link

https://github.com/CodyBontecou/nuxt3-and-vuetify

[Denoder]

@tobiasklemp can you try manually going into theme.mjs and changing:

head.addHeadObjs(computed(() => {
  const style = {
    children: styles.value,
    type: 'text/css',
    id: 'vuetify-theme-stylesheet'
  };
  if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
  return {
    style: [style]
  };
}));
if (IN_BROWSER) {
  watchEffect(() => head.updateDOM());
}

to:

function updateStyles() {
  head.push(computed(() => {
    const style = {
      children: styles.value,
      type: 'text/css',
      id: 'vuetify-theme-stylesheet'
    };
    if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
    return {
      style: [style]
    };
  }))
}

if (IN_BROWSER) {
  watch(styles, updateStyles, {
    immediate: true
  });
}

and see if that stops the memory leaks?

[tobiasklemp]

@teranode Yes, that stops the memory leak.

[harlan-zw]

Just FYI the latest vueuse/head is fully reactive so you shouldn't need this

 if (IN_BROWSER) {
        watchEffect(() => head.updateDOM());
      }

[KaelWD]

@harlan-zw I don't think that would help this issue, it only runs in the browser. Is there any way to detect if the installed vueuse/head is already reactive?