I encountered a problem while working on a Nuxt 3 project. The problem is simple. My application needs to make a GET call to my API in order to gather information before displaying anything. So I turned to the useFetch() method in the documentation. This method seemed perfect for my case, as it makes the call on the server side. So I can wait for the data before displaying it on the application. Having done this, everything worked perfectly, except for one detail. With the use of useFetch() my application has a lot of memory leaks! Because of this, the size of the heap only increases over time with the trafiic until it reaches the memory limit and then crashes.
To test, I run npm run build then node --inspect .output/server/index.mjs and launch the node.js debugger Memory tab. Between each snapshot, I run my application 1000 times with apache benchmark ab -n 1000 -c 100 http://localhost:3000/. I collect the garbage between each snapshot.
So I recreated a new Nuxt project to see if it was coming from my project or just from useFetch().
Here's my app.vue file:
<script setup>
const url = "https://pokeapi.co/api/v2/pokemon/ditto";
const { data, pending, error } = await useFetch(url);
</script>
<template>
<div>
<p v-if="pending">Fetching ...</p>
<p v-else-if="error">{{ error }}</p>
<p v-else>{{ data }}</p>
</div>
</template>
I have exactly the same problem with this new project.
So to solve my problem until I really understand why, I replaced const { data, pending, error } = await useFetch(url); with const { data, pending, error } = await useAsyncData(() => $fetch(url)); and miraculously no more memory loss.
So I wonder why useFetch() does this?
