Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how is it preventing hydration? #95

Open
oppianmatt opened this issue Nov 28, 2024 · 1 comment
Open

how is it preventing hydration? #95

oppianmatt opened this issue Nov 28, 2024 · 1 comment

Comments

@oppianmatt
Copy link

I think I'm missing something here. I wrapped a component with lazy hydration when-visible

But the child component mounted still fires even before it's visible.

What hydration is it actually preventing? I thought mounted runs during hydration. So what is this lazy hydration wrapper doing if the children still hydrate?

@dsvgl
Copy link
Contributor

dsvgl commented Nov 28, 2024

IMO this lib stoped working when Vue 3.5 came out with "native" lazy hydration: https://blog.vuejs.org/posts/vue-3-5#lazy-hydration
We encountered the same (using Nuxt) and found no way to make it work again. It worked fine before Vue 3.5.
We are now using the mentioned lazy hydration from Vue itself. It works but I don't like the verboseness. Hopefully Nuxt comes up with some syntactic sugar :)

Hint: I wouldn't recommend to use the hydrateOnIdle strategy if you are targeting mobile and/or desktop Safari. It uses requestIdleCallback under the hood which is not supported by Safari. Our whole app crashed on Safari because of this. At least Vue recently added a very simple setTimeout fallback in this case. But this is more a "don't crash the app" fallback then doing something similar to requestIdleCallback :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants