isairz/yomiko

SSR not work

billwing opened this issue · 2 comments

Hi. Why my project SSR data not work, pls?

index.vue

<template>
    <ul>
        <li v-for="item in postHot">{{item.msg}}</li>
    </ul>
</template>

<script>
export default {
    name: 'home-view',

    data () {
        return {
            postHot: []
        }
    },

     computed: {

     },

    metaInfo () {
        return {
            title: 'Home page'
        }
    },

    watch: {
        '$route': 'fetchData',    // not work
    },

    beforeMount () {
        this.getPostHot()    // work
    },

    methods: {
        fetchData () {
            this.getPostHot()
        },
        getPostHot () {
            this.$store.dispatch('FETCH_POST_HOT', {
                page: 1
            }).then(() => {
                this.postHot = this.$store.getters.postHot
            })
        }
    }
}
</script>

<style lang="scss">
    @import "./index";
</style>

Thanks for your interest.
'watch' is an observer to defect change of page. That would be work well.

On my project, I list-page is rendered in client side by design.
I don't feel the need for server-side rendering at list-page of my project, because the page has no SEO information.

If you want to SSR, add 'preFetch' that is called at 'server-entry.js', like this.
Don't forget preFetch call static function. (On Server-side, vue components have no instance)

Thank you very much. I have a try now. But I feel hard with the SSR in my project.