As far as I know asyncData function in NuxtJs pages is rendered in Server-side before creating the component. And also when user navigates between pages internally after page load. fetch function is very similar but we can set data to store inside it and check if data exist in store on route change...
Now the question is why would I want to send a request to an API in both page refresh and route change? Isn't it better to use fetch function and store data in vuex store so there is no need for further API calls? what kind of data is needed to get fetched inside asyncData function?
For example, if I want to show a list of posts in a server-side rendered app, I think the best way is to use fetch property to populate the vuex store and after that, in every route change I will have the data inside the store and there is no need for API call.
The use case is for retrieving data that is only relevant to a specific page.
For example, you have several endpoints that return data about specific animals, /api/cats, /api/dogs, /api/birds.
When you load theapp.com/cats in your browser, the asyncData function fetches the data from /api/cats and renders it server-side.
Similarly, for theapp.com/dogs, it fetches /api/dogs.
The use-case changes if there is an /api/animals endpoint that contains ALL the animal data in one feed (dogs, cats and birds).
In this case, you would do the retrieval once to populate the store with all page data with something like nuxtServerInit
Related
I'm using Nuxt 2.15 with target: "static" and hosting on a shared hosting "hostinger". I fetch the data from an external API using axios and Vuex state management and here comes the problem where the app doesn't load the new data it gets from the API.
How can I make the app rerenders its data and output the newly updated data it gets from fetching the API?
I assume you are using nuxtServerInit or asyncData for getting the data from API. This used with static mode means that data is get only during generation. Which is great for not too often updated content because it doesn't have to connect to server every time it's faster.
Depend on your needs you can:
Get data from API in mounted() hook this will get data from API every time the page is loaded BUT it also means that it could be loaded with some delay and it probably wouldn't be indexed by search engines
You can go with universal mode (https://nuxtjs.org/docs/configuration-glossary/configuration-mode/) and start your site on node.js server which will use up-to-date data from API each time user will open your site.
EDIT: as #kissu corrected me in comment this one is deprecated, please use this one: target:'server' instead of target:'static', which is default so you can just remove this line (https://nuxtjs.org/docs/configuration-glossary/configuration-target/ )
Firstly, I am new in nuxt. What I am trying to do is for every refresh I want to fetch data by calling api and set data to vuex store.
If I call it from mounted hook then all my problems will be solved but I want to take advantages of SSR in nuxt. What I want is to fetch data on server side and use it on client side.
There are two solutions for that- fetch (depricated) and anonymous middleware. It works fine when it is for server side application. My mode is Universal and target is static, for this configuration, what it does is, during npm run generate it calls the api and save the data for one time and use it for my static site.
Main problem is when my data changes, it does not reflect. How to solve this problem efficiently in nuxt by taking the advantage of SSR for load data on every page refresh.
And another problem to address, when I refresh my page other than '/', it shows the view of index.vue. How to overcome this problem?
I have an HTML site that also uses vue for a couple of functions, I use axios to fetch API Data. Now my problem is, whenever a user goes back to the index after browsing other pages, it has to fetch the API Data again, which makes my site load slow.
First site load --> Fetch API Data
Go to other pages -->
Goes back to main menu --> Fetch API Data Again
What i want is for the API to only fetch once, and whenever the user visits other pages and goes back to the main menu, it won't have to load again. Is there any methods to accomplish this?
Set a session cookie after you fetch your data and check if it exists before you try to fetch data.
I have a rather big form which I post to an API backend. The form has about 17-20 fields, depending on the status of a checkbox.
My plan is that after the user fills out the form I will validate it using Vuelidate and then display a summary of the data to give the user the possibility of reviewing their data. After the user reviews the data and considers that is correct, it posts the form to the backend API.
To do this, I plan on using Vuex to store the form object, and use the store to display the fields in the form and also on the summary page.
Is this a good approach, to store the form object in Vuex? If so, where I define the validation rules in store.js?
Thank you very much for your feedback!
You don't really need Vuex for this.
You can keep your form validation rules in your component itself. If you have something of a form builder or a different component that takes care of your form, you can keep your validation rules there or accept the entire form model through prop from the Component where you want to use the form.
Once the submission is done, you can pass the data to your Summary page via route itself. Check this out - https://router.vuejs.org/guide/essentials/passing-props.html
Whenever you think about Vuex or any state management solution think about the lifecycle of that data. How long is it needed to persist. In most cases, you'll find that it belongs to one view or two.
Vuex is good for cases where you need a piece of data to persist for way longer, possibly entire duration of the app. Example - User Details, Theme Settings, Experience Configuration etc.
Let me know how it goes.
I have a vue3-app that serves as the frontend of an asp.net core 2 api.
Much of the requested data gets used by multiple components. And in order not to make multiple identical requests, i want to store the response-data in my vuex-store if it's not in there already.
The problem is, that most of that data changes a lot, so i need to be able to tell vuex to refresh the data after some time.
But i don't want to refresh all of the requested data, since some of it doesn't need to be refreshed as often and some not at all (for example a list of countries).
So what I need is a way to tell vuex wheter i want to save the response of a specific axios request forever, or to re-request it after a set amount of time.
My questions are: Is there a plugin for this that I couldn't find? And if not, how could i implement the described functionality without rewriting it for every request?
There are some axios cache projects available:
axios-extensions (LRUCache)
axios-cache-adapter (localforage)
cachios (node-cache)
The 2 most popular currently are axios-extensions and axios-cache-adapter
Source of the chart
There is a library axios-cache-adapter that is a plugin for axios, to allow caching responses.
It is a great solution for implementing caching layer that takes care of validating cache outside of application's data storage logic and leverages it to requets library instead.
It can be used with both localstorage and indexedDB (via localforage library)