Preload Data using Promises with Vue.js and Nuxt.js
Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.
[00:00] In the next project with Vue, you can actually return a Promise. I'll just resolve this with an object of message, "I'm a promise." This will allow us to asynchronously resolve this data. You see now that this was server rendered, and this data has arrived asynchronously, because this Promise just resolved automatically.
[00:23] Because we can do that with a Promise, we can use libraries that return promises when they make get requests. For example, I'll add axios to my project.
[00:32] Yarn add axios so that will install that, which means I can import axios from "axios" now, and then return, instead of Promise.resolve, I can return an axios.get.
[00:45] To set up some data to get, I''m going to use now to launch a server using a project on GitHub called johnlindquist/swapi-json-server. This will find this project on GitHub and launch it, and you'll see it living here when I paste this on the url, and this will give me a bunch of Star Wars data.
[01:03] At people or /people after this long url, I'll have an array of people I can load. I'll copy all of this, and I'll just call this my api, paste it in there, and I'll say axios.get(api). Now, axios is going to give me a response back, which I want to take the data off of.
[01:21] I want the data to be on a people property on my data object. This Vue component has a data function which is returning this promise, and then the response from axios.get also has a different data property on it, which I'm going to assign to people which lives on this object which represents the data we can render inside of our template.
[01:43] To show that I'll create an ordered list with list elements and then loop through this people, I'll say, "person in people", and show, {{person.name}}.
[01:54] When I hit save here, go back to my project, you'll see all of the names appear after they've been server rendered.
[02:00] You can see from the Network tab when I refresh, there's no request to /people or the server to load this data from the client's side. It's done on the server. If I navigate away and navigate back, then, you'll see that request to people being made.
[02:17] For this initial render, it's making this request out using a server, and then any time after that, it will make the request using a client.