-
-
Notifications
You must be signed in to change notification settings - Fork 4.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
What is the best way to load page will all data loaded SSR but load page before data when client? #1429
Comments
Hi @babakness I don't understand what you're tying to achieve. When the page is server-rendered, when loading the page, |
Hey @atinux, right but when it is client-rendered export default {
async asyncData ({ isStatic, isServer }) {
return {
temp: process.server ? await getTemp() : null
}
},
async created(){
if(!this.temp) {
this.temp = await getTemp()
}
}
}
My question was if there was an easier way to achieve the same result
|
I see what you mean @babakness Keep in mind that you cannot use Also, you should use We decided to call Actually your solution is the only one at the moment. We may consider after 1.0 having an option to call the middleware, asyncData & fetch after the navigation to the new page for client-side but it's not our priority sorry. |
@atinux Got it, thanks! I appreciate the tip regarding ...
created: function() {
if(!this.temp) {
getTemp().then(function(response){
this.temp = response
})
}
... Not sure if this is what you meant regarding Anyway, thanks. |
@atinux I'm not sure I understand this:
Have a look at this example: https://nuxtjs.org/examples/async-data/ I uploaded it here: https://dist-hyxzzudifb.now.sh/posts
So now my question:
Thanks in advance for your help. |
I'm running into a similar dilemma. I have a purchasing app where it has to pull a lot of user based data from a server. All examples say I should hook the data fetching in asyncData. I've done that between the middleware and the async data the loading indicator is going ballistic and very misleading. This causes a very bad user experience. There are tons of very helpful examples out there for fetching the data and explaining the best way to do so, but nothing out there explaining helpful ways to increase the user experience. If i click on a button and I want to see animations and some progress being made but if that progress bar is sporadic then i dont know if something is going on in the background or not. I'm still not very sure what the best way to handle this situation is because userdata is supposed to be fetched on the server, but yet it causes the progress bar to be useless |
@jameshhood @camilodelvasto How did you guys solve this? |
@rubenclaes I couldn't find a solution... but I found a workaround. I wanted to load a child route with external content that was taking a long time to be generated, so it was too slow when I was coming from the home page. I ended up pre-fetching the data for that route, so when the user is coming from the home page, the data is already in the store and ready to use. The navigation is now snappier, but it takes a bit more for the home page to load. |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Hey guys,
I'm trying to wrap my mind around the best way to do this. So when a user arrives at a page that is server rendered, the data should load all at once. BUT, when the user arrives at a page after load, it should load the page then load the data, so it feels snappy. This is how I'm doing this right now, is the best way to do this in Nuxt?
Basically, I'm using
asynData
go get the pre-loaded data feel for SSR, but skipping this for client loaded pages. ieprocess.server ? await getTemp() : null
. Then I'm usingcreated
to see if the variable is already set (as is the case when SSR) and if not then trigger a data fetch.Is this the best way to go about this? Is there a better way? Thank you for your feedback.
The text was updated successfully, but these errors were encountered: