Statically Generate Notes using asyncData
We are going to replace our created lifecycle hook with the asyncData lifecycle hook. This is unique to Nuxt and exists outside of the vue lifecycle hook. It allows Nuxt, on the server-side, to grab data and do some calculations before returning all of our data to the component which then it can do stuff with. We will use it to Statically generate our notes file to send off to the client for our users.
Instructor: [0:00] One of the things about digital gardens is that we're often shipping static content. In other words, it's not content that we need a lot of JavaScript to dynamically render on the client side whenever the page is loaded. As a result, using the created lifecycle hook is not the best approach for our digital garden. Instead, what we're going to do is, we're going to go ahead and swap this out.
[0:18] Let's start by moving our created lifecycle hook to the top. What I want to introduce you to is the asyncData lifecycle hook. This is unique to Nuxt and exists outside of the Vue lifecycle hook. What it essentially allows Nuxt to do is on the server side to grab data and do some calculations before returning all this data to the component, which then it can do stuff with.
[0:39] As a result, you have the ability to fetch data in advance. This is powerful. Here's the catch, though. Because we're outside of the Vue lifecycle hook, this means that we don't have a this to work with. We'll start by removing the this from this.note and just declare a normal const variable for note. Then, to expose our note to the component, we return an object with note inside of it.
[1:00] By doing so, we no longer need the data function. We can go ahead and delete that. We're not done yet. The other thing you need to know about asyncData is that it's passed a default argument of context. It's often seen in the shorthand as CTX.
[1:14] What this allows you to do is basically access to things that you would normally want to get using the this context. In our case, we will go ahead and destructure it to make a little bit easier to read. This is how we grab our Nuxt content module for $content.
[1:28] Then for our routes and just default, we actually just call it route. Now we can actually delete the this as well as this and the dollar signs from the route. Once we save now, you'll see that everything works just as it did before.
[1:40] The benefit now though is that whenever we generate our page from Nuxt, it will actually generate individual files so that we ship those statically to users. With that, let's apply what we learned also to the notes page.
[1:52] We'll go ahead and move our created lifecycle hook to the top, and then we'll swap it out for asyncData. Then we'll go ahead and swap out the this context for a const of notes, which will return in an object of notes.
[2:05] Then we'll go ahead and return an object where notes is inside of that, which means we don't need our data function anymore. Then we'll want to destructure our content module from our context so we can delete the this so that it doesn't work inside of asyncData. Once we save, everything works exactly as expected.
[2:22] In this lesson, we've learned about the lifecycle hook, asyncData, which empowers us with the ability to actually fetch data in advance so that we can actually statically generate individual pages and reduce the amount of client-side rendering that we need to do. After all, we want to ship the fastest thing to our users.