search

BKWLD / vue-visual

Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.
https://bkwld.github.io/vue-visual
MIT License
59 stars 7 forks source link

Render an initial asset during SSR #21

Closed weotch closed 5 years ago

weotch commented 5 years ago

Currently, when vue-visual gets SSRed via Nuxt, there is no asset rendered. It would be nice if the rendering of the initial asset during SSG didn't depend in Nuxt hydrating the JS. This would also make it work better with lazy-hyrdate.

weotch commented 5 years ago

At least in 0.4.1, even if load=true, the asset isn't rendered in the markup during SSR. The problem use case is when the marquee uses vue visual but there are a bunch of WYSWIYG rendered non-vue-visual assets in the page, the marquee assets load after since they are initialized after the simply embdeded HTML ones. Also, this would be better for SEO.

weotch commented 5 years ago

Actually, the correct way to do this is to clear the transitions for the asset you want to load immediately ... then it will be rendered immediately. So like:

vue-visual(
  :poster='$contentful.img(page.image, 274, 82)'
  :image='$contentful.img(page.image, 2740, 820)'
  :load-poster='true'
  transition-poster='')

Then the poster will be rendered in the original markup ... however, I'm thinking of handling a different way for this use case, using <link rel="preload"> with the marquee images I want to request before the WYSIWYG body ones.

weotch commented 5 years ago

Yeah, the link preload approach worked for me