Introduction to Next.js Fetching Data & getStaticProps

Transcript from the "Fetching Data & getStaticProps" Lesson

[00:00:00]
>> All right, this part is going to be, a lot coming at you. There's a lot to understand here, but when you do, I think you'll really start to understand the power of Next.js. So, let's talk about fetching data with Next.js. So there are many ways to fetch data, but it's really gonna depend on when the data is available, when do you need the data, and what you're gonna do with it is gonna determine how you fetch the data.

[00:00:26] Cuz you're gonna have a lot of options here. So if we just start with what you already know, which is what I was saying earlier, is that, you can fetch data on the client side right now, using any mechanism you already using Reacts. I mean if you've built a client side React app, before, how do you fetch data there, you can do the same thing.

[00:00:45] Because once you're inside of react, you're inside of React, you have nothing to do with Next.js, once the browser is running your code, it's the output of React. So you can do whatever you want there Next.js doesn't change the behavior, of how your components execute doesn't change that, so that's just React, so that doesn't change.

[00:01:02] So hooks, things like that still work. Speaking of that, I do recommend checking out something called SWR, which is also made by Vercel and the Next.js team. It's a hook that does a lot of stuff for you when it comes to fetching data client side and React query pretty much does the same thing, they just do it slightly different, they're both really good libraries.

[00:01:22] Highly recommend checking them out for your client side data fetching needs, I don't use anything but either one of these. I don't know how I use anything before, because it just changes everything, so check it out. And the other thing is that's really beautiful that Next.js gives us is automatically injects the fetch function into your environment server side, and on the client.

[00:01:46] So you don't have to worry about installing Axios or affects polyfill or isomorphic fetch, you don't have to do that. It injects it globally on the client and the browser, I'm sorry, on the client and the server and if the browser doesn't have it, it polyfills it. So, yeah, that's free, that's a global for you, you're good to go, you can fetch data immediately just use fetch in any environment in Next.js, it just works, so that's really good.

[00:02:15] Cool so now, for fetching data ahead of time because we talked about fetching data on the client side, right? That's fetching data at runtime in the client. Now, if you wanna fetch data ahead of time, basically you got three different methods here. And we're gonna talk about all these in as much detail as I can before we start getting to writing the code and we will write the code.

[00:02:39] But we're just gonna talk about it before we start doing it because I really want you to understand it. So static data, all of these methods above here, so getStaticProps, getStaticPaths, and getServerSideProps, all of these are for prerendering pages only. Right, so you're never gonna use these methods when you get to them inside of a component, they're only meant for pages.

[00:03:04] So pages were not only there to help you create routes in the browser, but they actually have some significance to Next.js. I kind of hinted at earlier, when I said, you can think of a page as its own app, and that's because it is, because its code split, it's its own entry point.

[00:03:18] It's actually its own standalone app, it doesn't really rely on any of the other pages, to survive, I mean, technically it could run, but yeah, it might rely on some routing conditionals and stuff there. But yeah, it's its own app. So these methods here, are meant for pre-rendering pages only.

[00:03:39] And like I said, by default Next.js pre-renders every single page, every page gets pre-rendered, no matter how you build it by default, no matter if you want data or not, it's gonna pre-render it to HTML, which is a really, really big benefit. And that's why you see that little battery icon in the bottom right of your Next.js app when you go to it like that pre-render page so it takes you there.

[00:04:03] So that happens for you automatically. Now, if you wanna fetch data during that pre-render, this is where it kinda gets, you gotta really decide. So the first one we're gonna talk about is get static props on a page. So, get static props basically looks like this, in any single page, so in this case, in this index page here, I have a page, it's got some JSX or whatever.

[00:04:23] And I'm exporting a function called getStaticProps. And basically the way it getStaticProps works is, you return an object with a props function or I'm sorry a props method or props property, and whatever you put in that props, that's what's gonna get injected into your page on the client side, right?

[00:04:44] So that's what's going to be here. So basically, you can do whatever you want here it is an async function, it's only gonna be executed in a node environment, it's never gonna be executed in a browser. In fact, this function doesn't even get bundled with this code, so even though it's in the same file, it actually gets stripped out before the browser bundle gets built.

[00:05:07] So it doesn't even get shipped with the browser code even though it's in the same file. So Next.js is doing some really heavy lifting here to optimize this experience, which I think is really cool. So yeah, this will need to get shipped, which I think is really dope.

[00:05:19] So basically, you can do whatever you want here, you can do all different types of things, pretty much whatever you want here to get whatever props you need. So in this case, maybe you wanted to, I don't know, this was a CMS, and you wanted to get some content from a CMS to get the title and the hero, and the CTA text and button colors, all that stuff.

[00:05:39] You can make a call to your CMS and inject the results into your props. This is very similar to Gatsby's data sourcing, right? So if you do Gatsby you install like a source plug in and then that adds it to your content mesh graph, and then you can make a static query in the Gatsby page and you can do stuff like that.

[00:05:57] It's the same way, but this is where I would say it's a lot easier with Next.js because there's no overhead. There's no GraphQL, there's no source plugin, it's just write a function that returns some props, that's it. You can do whatever you want here, we don't care, and it executes on Node.

[00:06:15] So in my opinion, it's a lot easier to understand, but yeah you do give up some things that Gatsby does give you. So yeah, pretty easy here. Basically, here's a deep dive on it, the results of this function are basically saved into a JSON file. And then at runtime when you navigate to this page, in this case, the index page of your app, that JSON file the results that are gonna be injected after props into here, right?

[00:06:45] That's the hydration phase, that's what rehydration means. So I think that's really exciting, and you can look at that if you go look at the output of your Next.js app, you'll see like a whole bunch of JSON files in there with data. It's this, it's this data that you're fetching server side, it gets saved as a JSON file, then it gets injected at runtime and then cached and stuff like that.

[00:07:04] So that's how it goes from server side, to the client side. And I think that's a really good technique because, I've actually created server side frameworks before I helped create Angular universal, and the way that we did it was not that. So I think this is a much better way than what we did, so I give them props for that.

[00:07:26] This function and all other data functions that we're gonna talk about, like I said, will only ever run on the server, so if you're not thinking there yet, that literally means you can do whatever you would normally do on a server in here. So, file system work, you wanna read the file system?

[00:07:42] Cool, you can access process.current working directory inside of here, you can access the file system, you can do whatever you want inside of here. Connect to the DB, crawl a website literally anything you wanna do in the server you can do in this function that's in the same file as your component.

[00:07:59] So that's to me is really powerful because you have all the mechanism all the logic that this page depends on, for whatever data is living right next to it. So super powerful and only ever runs on the server, so I really like that. The other thing is that that function is gonna receive a context object, so let me just go through that real quick.

[00:08:19] So we'll just do some stuff, let me open, I'll go inside this index file right here, and I'll say export, Function getStaticProps like that. And then you're gonna get this context object, like this. And I'll just console log this, so you can see what I'm talking about, And I just need to satisfy oops, There we go.

[00:08:53] I just need to satisfy the return constraint series, I'll put props, and I'm not gonna pass any props. So just by doing that, I automatically get some extra functionality, so I'm just gonna run dev that. And then now you can see, nothing really logged here, so I'm gonna go here, refresh this, and when I actually went to the page, that's when it actually logged.

[00:09:21] So let's talk about that for a little bit. The reason it didn't log when I built it, is because we're in dev mode, and it's using server side rendering during dev mode. Server side rendering was we'll really talk about detail soon, renders when you hit the request, when you go to that route, then it computes.

[00:09:38] It only computes when you do a request to the route, it doesn't compute ahead of time. So it's a little different than like static rendering, which renders at build time, so that's why that didn't log until we actually went to the URL. And you can see right here, the context object is actually just an empty object, there's literally nothing here.

[00:09:54] And the reason that log sizes, is I hit like a refresh, and that's because there's nothing to put here. The content objects in the case of getStaticProps only really contains one important thing, the other things are new features with Next.js that I probably won't be talking about, which is like their preview feature.

[00:10:12] But the one that's really important is gonna be the.params. But, I don't have any params, in this file, it's just an index file there are no params in this URL, so there are no params here. So there's no way I can get them at the same time, because this is executed on the server, and it will be executed at build time, you won't actually have access to the params because the params didn't happen yet, you weren't even in the browser yet.

[00:10:39] Like if you're running this and you're building for production, and this thing is being statically built, because Next.js we'll run this function at build time when you go to production, you haven't even gotten params yet. This hasn't even been in the browser just on your machine, so where did the params come from?

[00:10:56] How do they get here? Well that leads us to the next function in side of fetching data with Next.js.