使用无限滚动时如何在nuxtjs中使SSR工作

时间:2019-05-11 15:43:14

标签: vue.js nuxt.js serverside-rendering

我正在尝试使用nuxtjs构建网站,主要用于服务器端渲染。我使用过vuejs,但是在这一切都在客户端执行,我不希望这种情况发生。

我有几个页面可以动态获取数据。在初始加载时,我曾使用nuxtServerInit来从服务器端获取数据,并且运行正常,但是我的问题是我拥有无限滚动页面,当我滚动到底部的下一个10个对象数组时,它将执行在客户端,这使我和vuejs一样受到关注。

我正在使用vue-infinite-loading,但是可以正常工作,但这显然与ssr不兼容,是否有其他相同的库可以实现目标

<infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
    <span slot="no-more">no more data...</span>
</infinite-loading>

方法

infiniteHandler () {
    let object = {
       current_page: this.Question.current_page + 1,
       orderBy: this.orderBy
     }
     this.$store.dispatch('Question/getAllQuestions', object)
        .then(
           response => {
             console.log('worked')
           }
        }
     )
}

当我滚动到底部时如何使它成为服务器端渲染,如何实现与nuxtServerInit在初始加载时(即服务器端渲染)相同的效果。

0 个答案:

没有答案