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?
Related
I am developing VUE PWA (with VUE-CLI) and I need to fetch different data depending on provided params. Let me explain what I need, I have http://localhost:8080/proconnect/ (I changed publicPath: '/proconnect/' in my vue.config.js and it works fine, but I need to grab different data from API depending on param. I try to use simple GET params like this http://localhost:8080/proconnect/?code=123, this works fine in a browser, but when I install PWA on my computer as an app it loads without GET param.
I use PHP for the backend. The app works fine when it built on the server.
I need to pass param somehow to my app to fetch different data. I don't mind to use different subdomains or another way to solve this issue. I will appreciate any suggestions.
Thanks!
If you are using vue-router, a simple way to get the params is by using the useRoute hook. https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup
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/ )
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).
Problem Defination:
I need to inject the authorization header to session storage of WebView, so that the server authenticates the user and redirects to the dashboard. If there is any delay in injection the WebView loads and redirects user to server's login page as it couldn't find the authorization header in the session storage.
What I tried:
onLoadStrat of WebView, I've injected the data using this.webview.injectJavaScript()
By doing so I'm able to inject the data to session storage but on first load there's a race condition. Injection takes a bit time and the Login screen has shown in place of the dashboard.
Expected Result:
We want to achieve the injection without any delay. Suggest me if there's any other way to get this working the way we want it to.
Waiting to hear from you guys. Your valuable suggestions are highly appreciated.
Thank you.
What you are facing is a direct result of asynchronous nature of React in general. You cannot stop the login screen rendering from happening (in other words, the render() function cannot be stopped). But what you can do is, you can inject the data into sessionStorage and then once it is set, change some variable in the state of the component. This will force the component to re-render but this time you will have the data injected. So here are the steps:
1.) Let it render first (you cannot stop it and stopping it anyways is anti-pattern).
2.) Inject the data as you need it to.
3.) Change the state of the component as soon as step 2 is done.
All of this should happen very fast and should not be visible to the end user, imo.
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)