Async data change when using server side render in Vue

Question

I want to use Vue in server side rendering, but the content data inside template have to request from the other CMS server.

<template>
  <h1>{{ content.heading }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        content: {
          heading: ''
        }
      }
    },
    created() {
      axios
        .get(CONTENT_RESOURCE)
        .then(content => this.content = content);
    }
  }
</script>

Due to axios.get is an async request, server will send empty content before request complete.

Use curl to request content:

curl 'URL';
# It got <h1></h1>,
# but I want <h1>Something here</h1>

How do I make sure it can render with CMS content data in server side?

When I use curl, it just got <h1></h1>, not <h1>Page Title</h1> — Knovour
– Knovour, Commented Nov 11, 2016 at 7:18

Knovour · Accepted Answer · 2016-11-12 12:50:16Z

3

According to vue-hackernews-2.0 example, src/server-entry.js will detect preFetch function in current route component.

So, just add a preFetch function in current route component and save the data to Vuex store.

<template>
  <h1>{{ content.heading }}</h1>
</template>

<script>
  const fetchContent = store => 
    axios
      .get(CONTENT_RESOURCE)
      .then(content => store.dispatch('SAVE_CONTENT', content));

  export default {
    computed: {
      content() {
        return this.$store.YOUR_CONTENT_KEY_NAME
      }
    },
    preFetch: fetchContent,   // For server side render
    beforeCreate() {          // For client side render
      fetchContent(this.$store);
    }
  }
</script>

answered Nov 12, 2016 at 12:50

Knovour

3173 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh · Accepted Answer · 2016-11-11 09:17:28Z

0

You have to make following changes in the code:

var demo = new Vue({
    el: '#demo',
    data:{
         content : {heading: ""}
    },
    beforeMount() {
      var self = this;
      setTimeout(function(){
          self.content.heading = "HI"
      }, 100)
    }
})

Here is a working fiddle.

edited Nov 11, 2016 at 9:17

answered Nov 11, 2016 at 7:07

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

5 Comments

Knovour Over a year ago

That is an ES6 arrow function, no need to create a self variable.

Knovour Over a year ago

Yes, it definitely works on client side, but I want sever side render.

Knovour Over a year ago

And why you make content become a global variable?

Saurabh Over a year ago

Ahh, Here is fiddle without making it global var.

whalesingswee Over a year ago

@saurabh I think he means server side, it's working only in client side

Collectives™ on Stack Overflow

Async data change when using server side render in Vue

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related