CODEWITHSUNDEEP
vue.jsnuxt.js
ottz0
ottz0

Reputation: 2605

nuxtServerInit and API Requests

I'm using nuxt.js and I'm using Firebase as an API. I'm using nuxtServerInit to fetch all of my products from the firebase API. I only have 3 categories and around 20 products so the API request is very small.

So that means I'm getting all of my products in one go, I'm then dispatching the products and putting them into my store.

I just wanted to ask before I start fully building the application right out if this is the right way to go about this?

So Essentially fetching from the API than using the store for all other access rather than async data via Axios on all other pages?

Routes My routes are all dynamic

nuxtServerInit

export const actions = {
    async nuxtServerInit(context){
        return axios.get(URL+'/products.json')
        .then(response => {
            context.dispatch('products/getProducts', response.data)
        })
        .catch(e => context.error(e));
    }
};

Upvotes: 1

Views: 1939

Answers (1)

N'Bayramberdiyev
N'Bayramberdiyev

Reputation: 3620

In the Nuxt.js documentaion:

If the action nuxtServerInit is defined in the store and the mode is universal, Nuxt.js will call it with the context (only from the server-side). It's useful when we have some data on the server we want to give directly to the client-side.

If you have small amount of data (3 categories and around 20 products) and you want to use that data directly on the client, I think it's perfectly fine to store it in the state. Because, this will help you avoid additional API calls during navigation.

nuxtServerInit will fill the store on the first page load. And you don't need to worry about any API requests anymore. I think this also will give you performance boost and responsiveness.

The last but not the least, asyncData is only available within pages (not in components) but fetch can be called from any of your Vue components.

Upvotes: 1

Related Questions