Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
Because Nuxt renders pages on the server, you should use the nuxt-link components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using nuxt-link and isClient to navigate and avoid reloading data.
[00:00] To navigate to another page, let's say we add a nav up here, and then toss in some Nuxt links. This will go to/completed. We'll call this completed, and then I'll create a completed page, new file, completed.vue, and then basically just copy and paste this entire thing in here.
[00:21] The behavior we want is if I go to completed and it loads the data fine and I refresh, it should load the data fine. The unexpected behavior here is if I go back to home. Let me open up the dev tools to see the network. I'll go to completed, and you'll see it actually makes this request to load the to-dos again.
[00:38] We don't need that because we already have the to-dos stored in our store. In our Fetch, I'm going to add from the context the isClient, and if this is Client, I'm just going to return out of Fetch, meaning it'll just skip over all of this stuff.
[00:55] Now when I save and I go to home, I clear out the network and I go to completed, you'll see it doesn't make that request in the network to this service, but it still has the to-dos from the store.
[01:06] This way, I can navigate through my site without reloading the data each time, and I can even refresh. When I refresh, it makes that request on the server, but it never has to make that load on the client.
[01:17] What I can do because this Fetch function is being used across multiple pages now, the home and the completed, is I can cut it out of here, in my pages create a new file. I'll just call it shared.js, and I'll paste my code in here, and I'll just export an async function and rename this from Fetch to init just so it doesn't collide with the Fetch library.
[01:41] I'll format that a bit, and now in completed I can say, "Import init from shared," and I'll say Fetch is init and just do the same thing in my index where I import init from shared, and now Fetch is init.
[02:00] When I go home, you'll see I start redirecting to my error, and right away I notice that I have an imported axios here, so I can grab axios, drop that in my shared, hit save, and now I navigate back to home. Now home is using this shared, and completed is using this shared, as well.
[02:19] Let's go ahead and delete the import axios from here. Fetch is using init. Fetch is using init, so that as I navigate...On my completed page I'll navigate back to home. On my index page, I'll navigate to completed.
[02:33] You'll see that as I refresh, clear this out, I'll go to completed. I'll go to home, completed, that I never actually make another request to load this data. It's only loaded before the initial server render, and from there on out, we're operating on it on the client.
[02:50] From there on out, we've stored the data in the store, so we can just grab it from there instead of having to request it again.