【Vue.js】 vue-lazyloadをSSR後だけ無効にしたい

※細かい挙動に関しては現在確認中です
※なので動作やこれが正しい方法かどうかは保証しません

きっかけ

レンダリング速度向上のためにvue-lazyloadを導入し画像の遅延ロードを目指した
しかし、画像がブラウザにキャッシュされている場合lazyloadの処理よりもキャッシュで直接imgタグを返したほうが早く表示される

特にSSR時が顕著に現れ、SSRでimgタグをレンダリングしたあとにクライアント側のレンダリング時にlazyloadに切り替わり真っ白になってしまう

対策

※コンポーネント単位でlazyloadを使ってる場合
※page単位の場合はasyncDataなどでおそらく抜け道があると思われる（未確認）

<template>
  <div>
    <img v-if="lazyLoadable()" v-lazy="src" />
    <img v-else :src="src" />
  </div>
</template>

<script>
export default{
  props: {
    src: {
      type: String,
      required: true
    },
    lazy: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data: function() {
    return {
      ssred: false
    }
  },
  created () {
    this.ssred = !!this.$vnode.elm
  },
  methods: {
    lazyLoadable() {
      if (process.server || this.ssred) {
        return false
      }
      return this.lazy
    }
  }
}
</script>

SSR直後は$vnode.elmがnullではないことを利用している
なのでsrcが変化する場合は使えないものと思われる

…本来は

window.cachesでキャッシュの存在をチェックしてlazyloadするかどうか判断したい