search

maoberlehner / vue-lazy-hydration

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

Lazy hydrate long list [Question] #36

Closed nachogarcia closed 4 years ago

nachogarcia commented 4 years ago

Hello! In the examples doesn't show how or if the library works with a list. I have a really long grid with cards and would love if I not only lazy load the images, but also lazy-hydrate the cards.

It's something like this

<div class="grid">
  <transition-group name="zoom" tag="div" class="group">
    <Card :product="product" v-for="product in products" :key="product.id" />
  </transition-group>
</div>

Since I read that every component of the same type would load at the same time, I'm trying with 

Card: hydrateWhenIdle(() => import('~/components/Card')),

But I'm not sure this library is suited for this problem. Any suggestions? Might be good to have a note about lists in the README :)

Thanks.

maoberlehner commented 4 years ago

For really long lists I'd recommend you to look at virtual scrolling https://github.com/Akryum/vue-virtual-scroller

But it can also help to use this library, yes.