App created with 'createSSRApp()' on the client side is not triggered beforeUnmount, unmounted hook.

[hiuny]

In server-side rendering (ssr), beforeUnmout and unmounted hooks do not occur (link1, link2). If you unmount() the app, the beforeUnmout and unmounted hooks do not occur. Isn't this a bit of a problem? This is because, in the beforeUnmount hook, code for the purpose of freeing memory can be executed. In the client, it may be possible to use the createApp() function, but since this function emptys the html of the container (code1), it is not appropriate because the html content disappears for a while and then appears. When the client creates an app through the createSSRApp() function, it seems appropriate to generate the beforeUnmout and unmounted hooks. What do you think?

link1
https://vuejs.org/api/composition-api-lifecycle.html#onbeforeunmount

link2
https://vuejs.org/api/composition-api-lifecycle.html#onunmounted

code1 - createApp()

core/packages/runtime-dom/src/index.ts

Line 102 in c03459b

container.innerHTML = ''

[leopiccionia]

Do you have any concrete use case in mind?

A server-rendered component should not declare any long-running state. Not only for memory efficiency but also for isolation (one server typically renders apps for many users).

On client-side, long-running states (like intervals/timeouts, subscriptions, global variables, etc.) should be initialized on the onBeforeMount and onMounted hooks. Those hooks are also not called during SSR.

If you follow those best practices, the component state should be properly garbage-collected by the runtime (if not, it may be a bug).

[LinusBorg]

During SSR, mounted hooks are not called either. So your example would not create a memory leak. However you would have to be careful not to trigger long-running effects such as this one in i.e. created or setup - moving them to mounted is the explicitly recommended usage:

https://vuejs.org/guide/scaling-up/ssr.html#component-lifecycle-hooks

[hiuny]

@LinusBorg
Thanks for the comment. I think my explanation was insufficient. I am well aware of what you said. I'm talking about 'hydrate'(createSSRApp()) the ssr result (html) on the client side. It's understandable that 'beforeUnmout' and 'unmounted' don't occur on the server side, but it's hard to understand why they don't occur on the client side.

[LinusBorg]

Bu those hooks are called ok on the client.

You should come up with a reproduction and open an issue if you think you found a case where they don't.

[hiuny]

ok. I'll post an issue. thanks.

[andoniabedul]

Hi, I want to return to this topic...

Do you have any concrete use case in mind?

A server-rendered component should not declare any long-running state. Not only for memory efficiency but also for isolation (one server typically renders apps for many users).

On client-side, long-running states (like intervals/timeouts, subscriptions, global variables, etc.) should be initialized on the onBeforeMount and onMounted hooks. Those hooks are also not called during SSR.

If you follow those best practices, the component state should be properly garbage-collected by the runtime (if not, it may be a bug).

This means that for example an internal assignation of some data it's not recommended because will cause memory leaks?

For example: I have some data from SSR that I use on the created(){} lifecycle method, to fill some variables of the internal state (data).

data(){
  return {
    names: []
  }
},

created(){
  this.names = this.ssrData.names;
}