SSR not work
billwing opened this issue · 2 comments
billwing commented
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>
isairz commented
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)
billwing commented
Thank you very much. I have a try now. But I feel hard with the SSR in my project.