Prerender issues

[kevinjcoleman]

I'm attempting to use this with prerender and I'm having siimilar issues to https://github.com/maoberlehner/vue-lazy-hydration/issues/15. Everything mostly works, but it's causing a full rerender of the page, rather than just hydrating of the given components. Am I doing anything immediately wrong here? Obviously it's tough to replicate this specific use case since it got an accompanying node server and middleware, but if you have any ideas let me know!

I'm mounting my app like this to ensure the JS is loaded correctly:

const root = new Vue({
  i18n,
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

document.addEventListener("DOMContentLoaded", function(event) {
  root.$mount('#app')
})

Then in App.vue I have:

<template>
  <div id="app" data-server-rendered="true">
      <div class="app-content">
        <router-view/>
      </div>
  </div>
</template>

Then lastly in my component I have:

<template>
  <div v-show="condition">
    <LazyHydrate ssr-only :trigger-hydration="condition">
      <div>
        <product-page v-if="condition"/>
      </div>
    </LazyHydrate>
  </div>
</template>

<script>
import LazyHydrate from 'vue-lazy-hydration';

export default {
  components: {
    ProductPage: () => import('views/product-page/product-page.vue'),
    LazyHydrate
  },
  ....
}

Am I doing something wrong here? This seems like it should work, but I'm getting mismatching node errors.

Parent:  <div data-v-36543689 class=​"app-content">​…​</div>​     vue.esm.js?a026:6040
Mismatching childNodes vs. VNodes:  NodeList [div] [VNode] .     vue.esm.js?a026:6041 
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. vue.esm.js?a026:591

[maoberlehner]

Hey @kevinjcoleman thanks for taking the time to create this issue! Please also provide a CodeSandbox reproduction link so it easier for me to reproduce and fix this issue. Thanks!

[maoberlehner]

Closing this because of inactivity.