Data VS Async Data in Nuxt

Question

Im using vue.js with nuxt.js, I'm just still confused as when to use Data VS Async Data. Why would I need to use Async data when I just have data that just displays on the page?

I have a data object of FAQ's and just want to display the data without doing anything with it. What are the benefits of using the asyncData? Or what are the cases or best use of them?

Should I display list data such as this as async by default if using data such as this inside of my component?

Data

 data:() => ({
   faqs:[
     {"title":"faq1"},
     {"title":"faq2"},
     {"title":"faq3"},
    ]
 }),

asyncData

asyncData(context) {
        return new Promise((resolve, reject) => {
            resolve({
                colocationFaqs:[
                    {"title":"faq1"},
                    {"title":"faq2"},
                    {"title":"faq3"},
                ]
            });
        })
        .then(data => {
            return data
        })
        .catch(e => {
            context.error(e);
        });
    },

Iv'e read the docs and as I've said in my question, i'm still confused, why would I need to pre render it when it is going to be displayed anyway — ottz0

Ifaruki Ifaruki · Accepted Answer · 2020-05-12T05:10:52

asyncData happes on the serer-side. You cant access browser things like localStorage or fetch() for example but on the ther hand you can access server-side things.

So why should you use asyncData instead of vue cycles like created?

The benefit to use asyncData is SEO and speed. There is this special context argument. It contains things like your store with context.store. Its special because asyncData happens on server-side but the store is on the client side usually. That means you can get some data and then populate your store with it and somewhere else you display it. The benefit of this is that its all server-side and that increase your SEO so for example the google crawler doesnt see a blank page

why would I need to pre render it when it is going to be displayed anyway

Yes for us it doesnt matter if i send 1 File to the client and it renders all data like in SPA's or if its pre-rendered. But it doesnt matter for the google crawler. If you use SPA mode the crawler just sees a blank page. You can discoverd it too. Go to any SPA website and click right-click and inspect you will see thats there only 1 Div tag and few <script> tags. (Dont press F12 and inspect like this thats not what i mean).

Data VS Async Data in Nuxt

1 Answers