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.
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 am setting up a custom widget in Sitefinity 13 that retrieves data from an external source and caches that data on the server-side. I need the widget data to refresh the data on whatever page it is on once that cache timeout is over, but it appears that the Sitefinity page caching mechanism will cache the rendered results of a page and won't make the call to my custom widget's controller to see if we need to update the data. I've looked into the built-in Sitefinity cache dependency functionality, like IHasCacheDependency and SubscribeCacheDependency, but that appears to be geared toward watching when a page, widget, or other item is updated through Sitefinity's mechanisms (e.g. update version of page is published). I don't see a way using that functionality to accomplish my goal.
Am I missing something with the built-in cache dependency module? What options do I have?
You have a few options:
Instead of getting the data from your controller, you can get it via javascript call. That call can be either towards the external source or, if that's not feasible, towards a proxy api controller on your site, which in turn requests the external api. This way the page will be cached, but the JS script will run and will not be dependent on the page cache at all.
Create a new page cache profile in the settings, that has no sliding expiration and lasts exactly the time you need, e.g. 5 minutes. Then set that profile as cache profile of your page. This way page cache will be invalidated exactly when you need it (time-wise).
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
When I use LIMIT to make pages of results, how do we usually know the offset i.e. which page should be retrieved for each request?
Via cookies?
Via a query string parameter, traditionally. URLs typically include a ?page=3 to request page 3, like you'll see all over Stack Overflow: https://stackoverflow.com/questions?page=2&sort=newest
This is something you absolutely should not do through cookies. The URL should include everything necessary to navigate to the given page. Consider a user bookmarking page three of your results, or trying to link somebody else to the page they're looking at: Using cookies to store pagination data breaks these situations completely.
Usually via request parameters in action frameworks (RoR, ZF, Cake, Django) and via state of the session in component frameworks (Prado, JSF, ASP.NET). Session is usually associated with request by a cookie.
Using session to store current page is quite common in business-oriented applications, where state of the gui might be very complicated and the practically of being able to bookmark a page - limited.