Why components always hydrated on initial time (NuxtJS)

[sakandemir06]

<LazyHydrate :trigger-hydration="false" v-slot="{hydrated}">
    <div>
        <div>
            Hi there! {{hydrated}}
        </div>
    </div>
</LazyHydrate>

In this case, "hydrated" always returns true, but I need add condition for hydrating. Previously, it was working properly in my project. What is the problem?

[maoberlehner]

Because the code is always hydrated on the server. There are always two cycles with SSR and Nuxt:

1. The server runs the code; the components are always hydrated; Hi there! true is rendered.
2. The client runs the code; the components are not hydrated; Hi there! true which is already there from SSR, stays untouched, because it's the point of this package to not re-render SSR HTML.

So hydrated is false on the client and Hi there! true is shown because it was rendered on the server.

[sakandemir06]

Because the code is always hydrated on the server. There are always two cycles with SSR and Nuxt:

1. The server runs the code; the components are always hydrated; Hi there! true is rendered.
2. The client runs the code; the components are not hydrated; Hi there! true which is already there from SSR, stays untouched, because it's the point of this package to not re-render SSR HTML.

So hydrated is false on the client and Hi there! true is shown because it was rendered on the server.

Thank you