search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.18k stars 52 forks source link

missing class attributes on wrapper functions #50

Open simllll opened 4 years ago

simllll commented 4 years ago

this happens only when using the wrapper functions for hydration and not by using a tag.

e.g. you have a <CustomComponentA class="xyz" />

and CustomComponentA has <div class="blub"></div> as template.

Currently only "xyz" is applied while the component is not hydrated, with this regular class merging is happening and the final result class is "xyz blub".

I've added a test for this scenario.

Without the patch following scenarios happen:

  1. SSR (correct): image

  2. before hydration (wrong, this also causes some flickering): image

  3. after hydration (correct again): image

with this patch missing classes (missing in vnode, but are available in $el) are applied to the loading component. @maoberlehner please let me know what you think of this issue.

thanks simon

maoberlehner commented 3 years ago

That's strange. Never realised that it behaves like that. But this seems to me like a bug in the server side rendering. Not sure if this should be fixed in here. But also I don't fully understand it yet. Maybe I will take some time to think it thru. But stopped working on this project because I expect this to be obsolete with Vue 3 (hopefully).

patrickxchong commented 3 years ago

@maoberlehner can you share your thoughts on why you think this component will be obsolete with Vue 3? I'm deciding whether I should aggressively optimize my Nuxt.js app with this component or hold off on that. I can't seem to find any info on lazy hydration being planned for Vue 3.

maoberlehner commented 3 years ago

See https://twitter.com/youyuxi/status/1265684355420225537 for example.

patrickxchong commented 3 years ago

Very cool, thank you! 👍