Caveat: attrs that change before lazy-hydrate.

[danelowe]

I just spent a bit of time debugging an intermittent issue that prevented hydration of a page.

I'm pretty certain now that the issue is to do with an a value that changes after the page is loaded, and passed as an attr to a component in lazy hydrate. The value sometimes changes before the lazy-hydration and so the rendered html differs to the ssr html, hydration bails, and lazy-hydrate throws an error. The page then doesn't respond to inputs.

This makes complete sense, and wouldn't expect it to work otherwise, but this is such a simple mistake to make that it might warrant a caveat on the readme.

[wizardpisces]

After read source code: at core this package transforms normal component to async one，so this package can be used under one hidden condition: the component could be transfromed to async one; So to your question: your component obviously could not be changed to an async one, so this package should not be used

[paulnta]

That's true, changing a prop before a component is hydrated could lead to a hydration error (Mismatching childNodes vs. VNodes)

Example: See https://codesandbox.io/s/lazy-hydration-dom-mismatch-m9ivp?file=/pages/index.vue

<LazyHydrate when-visible>
  <BaseSection
    title="Title"
    description="Description"
    :showDescription="showDescription"
  />
</LazyHydrate>

Changing showDescription in mounted hook will lead to a hydration error when BaseSection becomes visible (while doing the same without lazy hydration is safe)

export default {
  // ...
  data: () => ({ showDescription: false }),
  mounted() {
    this.showDescription = true
  }
}