Introduction to Next.js Fetching Notes & Dynamic Rendering

Transcript from the "Fetching Notes & Dynamic Rendering" Lesson

[00:00:00]
>> The next thing we'll do is we'll fetch one note, so we will look at that and we can see, we're also gonna use getServerSideProps for this. This one is gonna be a little different, we want a little different experience here, so we're gonna attempt to fetch a note but if the note is not there then we're gonna redirect to /notes.

[00:00:20] Now, that's powerful, right? We're literally fetching data service I. We're gonna try attempt to get the data, if it comes back not okay, where's it gonna redirect back to /notes, that's it. And we won't even finish rendering this page. I believe that's like a superpower that you can do.

[00:00:38] So we'll just do that and we're gonna copy that thing. So what we'll do is we'll go to the id page here. And we'll say exports async function getServerSideProps like that. I'm gonna need the params here, I'm also gonna need the request objects or the response objects, one of those which one.

[00:01:06] We're gonna need both. Obviously, the response, they're also gonna respond to, I'll get both. So we'll do that, and I'm gonna paste in this HTTP call. So one thing to note is I'm getting the params here and this is, this is the thing about getServiceSideProps is running at build time.

[00:01:23] So I do have the parameters in the URL, so I can refer to them here. Whereas if I tried to use getStaticProps here, there's no way I would have the parameters. So then I would have to use getStaticPass to get the parameters. And then I would have a naked API call to the database to get every single note ahead of time, get all their IDs and they'll render a static page for every single one.

[00:01:47] Which is I think you should be doing for most of the things that you're doing but in this case my note is dynamic, it's always changing. I don't wanna statically render my note, I want it to always be dynamic, so I'm not gonna do that. But this is a blog, this is anything static, or something that maybe I can do hybrid on the front end, which I probably can with this note, then I wouldn't do getServerSideProps.

[00:02:08] In fact, I probably would, I would just stretch the note on the client, to be honest, I would just do it here. Because I don't need this page to be indexed by Google. So I wouldn't even do ServerSideProps, I was expected on the client most likely. But for the sake of example, we're gonna do get ServerSideProps.

[00:02:22] All right, so we get the response and then we can say if not response.ok,, which is something that fetch will tell you if it's a non 200, and then it's not okay. Then I'm just going to say res.writeHead I believe, and I would put a 302 and then I'm going to put a, I wanna say that like a location.

[00:02:43] Let me see. Yeah, I was right, so I'll follow my instincts. So location and then I could put a relative path in here for notes. And then I'll just say res.in, this request, they'll end it. And just to comply with the API of getServerSideProps, I'll just return a props with an empty objects.

[00:03:13] And then if we do get something back, then I do wanna get this data. So then I'll say data = await response.json, not jone. And then I'm just gonna return props here with the actual notes, which will be the data. All right, so we got that and then up here, I just need to use that.

[00:03:43] So then I'll have my note And I have, So now that this node is injected I don't really need to get the query anymore, I'm not doing anything client sides, so I don't really need the router or the query here. I can just say notes.title, like that. All right, so let's try that and see what happens.

[00:04:14] I might have to rebuild, so let's check it out. Okay, that was a prefetch, and then boom, there we go. So then we got note 2, if I go back we got note 1, note 4, I don't even notice that the first time I clicked on it, like took a minute wait it, it was pre-rendering that page.

[00:04:32] That was the first time that that page ever got ran. So I had to pre-render it and then every single call after that is instant, right? Pretty instant. So I just pre-rendered it, which, like I said, you still get that with ServerSideProps, you still get that pre-rendering, which is really awesome, and that caching.

[00:04:51] Okay, cool, the last one we're gonna do is we're gonna get StaticProps on the homepage. So let's head over to the homepage here, and what we're gonna do is, we're going to say exports function, we won't do anything async here, export function, get static props. And we're gonna simulate getting data from a CMS.

[00:05:19] So if you had a CMS here, you'll get data from a CMS like that, and instead, we'll just act like we have it already and return some props. And then maybe I'll say some content. And then I'll say a title, which is this is my really nice app, like that.

[00:05:44] Come on, come on, there we go. All right, so I'm returning a prop called content, that's an object that has a title. So now I can come up here and say, give me the content, And then I can replace this with, Content.title. Boom, so now, if I go back to my homepage, there we go.

[00:06:12] This is my really nice app, there's my content, this got statically rendered it literally render instantly, I didn't have to do a rebuild, it was too fast. And we're gonna get a little bit into more about what these things actually do other than fetching data. And yeah, it's gonna be a little crazier, but yeah, it's pretty much there.

[00:06:32] Okay, cool, so if you didn't feel like keeping up, you can check out this data fetching branch and everything will be there. So check it out if you want to.
>> Hey, Scott
>> Yes?
>> Is data fetching and components very much different?
>> Good question, so data fetching and components.

[00:06:51] So if you wanted to fetch some data and components, the way you would do that is purely client side. You have to do a client just the same way you do in a React now, it's literally the same thing. Because next is.js splitting based off routes and pages.

[00:07:05] So those are the things that get server side render. And then if those pages import components, then those components get rendered on the server too. But it all starts off with the entry to the page. So the page has to get rendered, and then the components follow. So because of that, you're not going to be exporting things like I know and gas where you can export queries inside of components, and stuff like that.

[00:07:28] No, you won't be doing that here, you'll just be fetching data on the client side. If you do need some data that server side render, that's like fetch that build time, or server time inside of a component, I highly recommend it. It's got to be really the only way you can do is you got to pass it down, right?

[00:07:46] So either can use context using react context, use some type of state management library that you want, or just passing down as props. So I think that's the way to go and that's actually kinda like how I've done it anyway. I don't really write react apps where I do data fetching inside of a component.

[00:08:01] It's rare that I would do it, it would have to be like I'm integrating with this third party API that requires me to like printer stripe, sometimes I have to do it or like Google Maps or something, where I gotta like, integrate and pull something down. Most of the time I do all my data fetching inside of pages anyway.

[00:08:16] And then I use whatever mechanism I want, whether it's a state management library, whether it's like I said, context, or just passing them down to the components, that's kinda how I do it. That way I can organize my loading and my UI strategy from one source, when you start pulling in data in many different components is like okay, well how do you handle the loading state?

[00:08:36] How do you handle the error state? And how do you handle all these other states and it gets all over the place? It's a lot easier just to do in one place, in my opinion, so that's kinda how I do it. And it's really also makes your components a lot more flexible and presentational.

[00:08:49] So you can just use those components in any single app because all they take are props, they don't do any actual logic. So that's just something that I've been doing.