Nuxt 3: SSR memory leak in `useHead()` with computed getter on the server

Environment

• Operating System: Linux
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.11
• Nitro Version: 0.5.4
• Package Manager: npm@8.5.5
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

<script setup lang="ts">
import { useHead } from '#head';

// ...

useHead(() => getMeta(meta.value));
</script>

Describe the bug

Using a computed getter (() => ...)) as an argument of the getHead() results to memory leak on the server.

See also: https://github.com/nuxt/framework/issues/8003.

Temporary fix

<script setup lang="ts">
import { useHead } from '#head';

// ...

if (process.server) {
  useHead(getMeta(meta.value));
} else {
  useHead(() => getMeta(meta.value));
}
</script>

Additional context

Memory consumption

Production build of an application, 60 requests per second, 10 minutes of load (36 000 requests).

Before fix

After fix

Memory difference

Flame graph

Table

Logs

No response

[danielroe]

The issue here was not actually (IIRC) the use of useHead within the component but rather that Nuxt itself was calling use head in a plugin meaning that computed was being called outside of component setup.

I believe this is resolved as computed is no longer being called by @vueuse/head, and functional/computed types are excluded from app.head in nuxt.config.

Let me know if not and I’ll happily reopen.

[mrauhu]

I have a question off topic. What is the name of the program/application you use to track of memory?

@antlionguard Datadog APM with Continuous profiler.