00:00 Most apps wouldn't be apps without some data loading. We need some dynamic data, and so that's what we're going to be doing in this exercise where we can actually load data for a particular user. You can take a look at the Network tab, and as we navigate between these, we're loading data as we go. Here's the note, the title,

00:18 and the content, and then we go to another one, and boom, we've got a note with the title and the content. We do dynamic loading as we navigate around the app, but then we also do full server rendering to have initial data when we load the app. There are a couple of things I want to mention first. When a user goes into a browser and says,

00:37 I want to go to example.com, it's going to go to the server, server is going to do its stuff and generate some HTML, send that response to the browser. The traditional way of building apps, whenever the user would click on a link that would do a full page refresh, and so it would go through this process again. Every time you click on a link, go to the server, come back with HTML. Then same thing with form submissions.

00:57 It would go to the server, send the data along, and we'll talk about mutations next, don't worry. But it will send the data along, then the server will do its thing, and it will send back a redirect, and then the browser says, oh, okay, I'll go and go to that new page and we'll go get the updated HTML. Pretty much this flow is just the way that

01:17 things work with traditional apps. With the way that we're doing things these days, we want to not do full page refreshes, and so we're using the Fetch API to make these network requests for going to get some updated data. The Fetch API using the request and

01:34 response APIs as part of the Fetch API. In Remix, the way that we utilize this API is mostly on the server side actually. We've got this loader, and this loader only runs on the server, and it's associated to your route because it's in the same route file as the rest of your code there.

01:53 Then from there, we can actually do whatever we need to on the server. We can call a further downstream service if we want to, or we can talk to a database directly or talk to a third-party API. We can do all that stuff inside of our loader function, and then we return some JSON,

02:11 and then that can be made available in our UI with a special hook called UseLoaderData. Because this request to response API, it's really nice because it's standards focused,

02:29 and so the more time that you spend learning how to use this, the better you get at the web platform, at these APIs. But it is a little bit extra work, and so Remix does also offer a utility for not having to create the new response and set headers and stuff. This also has really great implications for TypeScript type inference which

02:49 we will learn about in the exercise. Then you also, like I mentioned, you have the UI side of things, and so we have this UseLoaderData hook. Here's some TypeScript stuff that we'll talk about in the exercise so we can get some type safety there. Then we've got our data on our UI.

03:08 The reason I'm saying it's UI and not client-side code is because again, this runs on the server. We get this as part of the server render as well. The cool thing is you don't have to think about whether it's server render or the UI needs to get an update or anything like that. All of it's the same to you because of

03:25 the way that it just works and it really does. It's fabulous. I think you're going to have a really good time with this series of steps for this exercise. Have a good time and we'll see you on the first exercise. Have a good time.