nuxt.js 服务端渲染首屏需要等待较长时间才能使用

Question

原来的vue项目经过Nuxt.js改造之后出现一些问题
首屏加载时候，列表数据在asyncData中获取，可以很快通过服务器渲染出来，但是此时页面处于无法操作的情况，还需要等待头部和其他一些并没有在asyncData中获取的数据在客户端渲染完成才能进行操作。
对此不知道是首屏渲染时候是先需要等待客户端渲染然后等待客户端渲染完成才能操作？还是客户端渲染没有完成（列表图片还没有加载完成）的原因？要如何解决呢？
还有一个关于上面提到的图片问题，图片列表通过服务端渲染要如何进行懒加载和加载未完成时候的处理？通过在页面组件的img标签使用@load判断图片是否加载完成切换预设图片，似乎并不能达到预期的效果：

<template>
<div>

<img class="product-img" v-if="loading" :src="AList.product_img." @load="loadImg"  alt="img">
<img v-else src="~assets/image/timg.gif"   alt="img">

</div>
<template>
<script>

export default{
    ...
    data(){
        return {
            loading:false
        }
    }
    ...
    loadImg () {
      this.loading = true
    },
}

</script>
实际的效果是，服务端渲染直接显示列表数据图片，然后（应该是客户端渲染）显示预设图片，等到有图片加载完成后重新显示数据图片。
图片是在components子组件中的，不是在page路由级页面中的