1 00:00:02,000 --> 00:00:03,000 So, let's explore 2 00:00:03,000 --> 00:00:05,000 this first form of pre-rendering, 3 00:00:05,000 --> 00:00:09,000 or of data fetching with Next.js. 4 00:00:09,000 --> 00:00:12,000 And that would be the Static Generation, 5 00:00:12,000 --> 00:00:15,000 which I did mention is typically recommended, 6 00:00:15,000 --> 00:00:18,000 but of course, I will explain all the details now 7 00:00:18,000 --> 00:00:21,000 and throughout this section. 8 00:00:21,000 --> 00:00:23,000 Now, with Static Generation, 9 00:00:23,000 --> 00:00:24,000 there is a simple idea. 10 00:00:24,000 --> 00:00:29,000 The idea is that you pre-generate a page during build time. 11 00:00:29,000 --> 00:00:33,000 And pre-generate means that all the HTML code 12 00:00:33,000 --> 00:00:35,000 and all the data that makes up the content, 13 00:00:35,000 --> 00:00:38,000 is prepared in advance. 14 00:00:38,000 --> 00:00:40,000 So, on the server side though, 15 00:00:40,000 --> 00:00:42,000 that can be confusing here. 16 00:00:42,000 --> 00:00:43,000 With that I really mean, 17 00:00:43,000 --> 00:00:45,000 during the build process, 18 00:00:45,000 --> 00:00:48,000 where you are allowed to execute code 19 00:00:48,000 --> 00:00:52,000 that would normally only run on the server side, though. 20 00:00:52,000 --> 00:00:55,000 Code that interacts with the file system, for example. 21 00:00:55,000 --> 00:00:58,000 And you're going to see it in action very soon. 22 00:00:58,000 --> 00:01:01,000 So, data and pages are prepared during build time 23 00:01:01,000 --> 00:01:05,000 when you build your application before you deploy it. 24 00:01:05,000 --> 00:01:10,000 Now, because pages are then pre-built during build time, 25 00:01:10,000 --> 00:01:12,000 once you deploy them, 26 00:01:12,000 --> 00:01:15,000 they can be cached by the server, 27 00:01:15,000 --> 00:01:18,000 by the CDN that might be serving your app. 28 00:01:18,000 --> 00:01:20,000 And therefore, incoming requests 29 00:01:20,000 --> 00:01:25,000 can be served instantly with those pre-built pages. 30 00:01:25,000 --> 00:01:28,000 Now, then, as I mentioned before, 31 00:01:28,000 --> 00:01:30,000 those pages after they were served, 32 00:01:30,000 --> 00:01:33,000 are still hydrated with your React app. 33 00:01:33,000 --> 00:01:37,000 So, you still have a regular React app in the end. 34 00:01:37,000 --> 00:01:39,000 The only difference is that the pages 35 00:01:39,000 --> 00:01:41,000 which are sent to your clients, 36 00:01:41,000 --> 00:01:43,000 are not empty initially 37 00:01:43,000 --> 00:01:45,000 but pre populated with content. 38 00:01:45,000 --> 00:01:48,000 Thereafter, you can still do whatever you want to do. 39 00:01:48,000 --> 00:01:51,000 It's still a regular React app. 40 00:01:51,000 --> 00:01:54,000 So, therefore, now, one main question, of course is, 41 00:01:54,000 --> 00:01:57,000 how do we tell Next.js 42 00:01:57,000 --> 00:02:00,000 that a certain page should be pre-generated? 43 00:02:00,000 --> 00:02:02,000 And how do we tell Next.js 44 00:02:02,000 --> 00:02:06,000 which data is needed to pre-generate a page? 45 00:02:06,000 --> 00:02:08,000 And the answer is, 46 00:02:08,000 --> 00:02:10,000 there is a specific function 47 00:02:10,000 --> 00:02:15,000 which we can export from inside our page components. 48 00:02:15,000 --> 00:02:19,000 And that's important only from inside our page components, 49 00:02:19,000 --> 00:02:22,000 not from our React components, 50 00:02:22,000 --> 00:02:24,000 but only from inside the component files 51 00:02:24,000 --> 00:02:27,000 that live in our pages folder. 52 00:02:27,000 --> 00:02:28,000 From in there, 53 00:02:28,000 --> 00:02:33,000 we can export the special async function, getStaticProps. 54 00:02:34,000 --> 00:02:36,000 Now, that name matters. 55 00:02:36,000 --> 00:02:40,000 It must be written exactly like this, getStaticProps, 56 00:02:40,000 --> 00:02:45,000 because that is then a function Next.js will watch out for. 57 00:02:45,000 --> 00:02:48,000 Its async, which means it returns a promise, 58 00:02:48,000 --> 00:02:50,000 and you can use the await keyword in there. 59 00:02:50,000 --> 00:02:55,000 And then, the special thing is that in this function, 60 00:02:55,000 --> 00:02:56,000 you can run any code 61 00:02:56,000 --> 00:03:00,000 that would normally run on the server side only. 62 00:03:00,000 --> 00:03:01,000 So, in that function, 63 00:03:01,000 --> 00:03:03,000 you don't run the client side code, 64 00:03:03,000 --> 00:03:06,000 you're not restricted to that 65 00:03:06,000 --> 00:03:10,000 and you don't have access to certain client side API, 66 00:03:10,000 --> 00:03:13,000 you don't have access to the window object, for example, 67 00:03:13,000 --> 00:03:16,000 but instead, you can run any code you want, 68 00:03:16,000 --> 00:03:20,000 that normally would only run on the server side. 69 00:03:20,000 --> 00:03:21,000 And even better than that, 70 00:03:21,000 --> 00:03:25,000 code that you write inside of this getStaticProps function, 71 00:03:25,000 --> 00:03:29,000 will not be included in the code bundle 72 00:03:29,000 --> 00:03:31,000 that's sent back to your clients. 73 00:03:31,000 --> 00:03:33,000 So, any code you put in there, 74 00:03:33,000 --> 00:03:36,000 will never be seen by your clients. 75 00:03:36,000 --> 00:03:38,000 So, if you for example have code in there 76 00:03:38,000 --> 00:03:41,000 that contains database credentials, 77 00:03:41,000 --> 00:03:44,000 you typically wouldn't want to expose those credentials 78 00:03:44,000 --> 00:03:46,000 on the client side. 79 00:03:46,000 --> 00:03:49,000 You can safely write it inside of getStaticProps 80 00:03:49,000 --> 00:03:53,000 because that code will never end up on the client side. 81 00:03:53,000 --> 00:03:56,000 And therefore, let's now take a closer look at that 82 00:03:56,000 --> 00:03:58,000 and let's start writing some code there, 83 00:03:58,000 --> 00:04:02,000 so that we fully understand this function and how it works.