1 00:00:02,000 --> 00:00:04,000 Now to fully understand getStaticProps 2 00:00:04,000 --> 00:00:06,000 and also see what we can do with it, 3 00:00:06,000 --> 00:00:11,000 let's quit the dev server for now and run npm run build. 4 00:00:11,000 --> 00:00:13,000 This is the build command which you need 5 00:00:13,000 --> 00:00:18,000 to run before you deploy your NextJS site. 6 00:00:18,000 --> 00:00:20,000 Now, we are not going to deploy here 7 00:00:20,000 --> 00:00:23,000 but running it is still helpful and interesting. 8 00:00:23,000 --> 00:00:24,000 If we run npm run build here 9 00:00:24,000 --> 00:00:27,000 to build that production build, 10 00:00:27,000 --> 00:00:30,000 to create that production build, 11 00:00:30,000 --> 00:00:31,000 we see some output here. 12 00:00:32,000 --> 00:00:35,000 And in this output, we see what it did 13 00:00:35,000 --> 00:00:38,000 and that it generated some static pages, for example, 14 00:00:38,000 --> 00:00:41,000 four pages to be precise. 15 00:00:41,000 --> 00:00:43,000 And we see which pages it generated. 16 00:00:44,000 --> 00:00:47,000 And what we see here is that it generated the root page 17 00:00:47,000 --> 00:00:49,000 for slash nothing, 18 00:00:49,000 --> 00:00:53,000 the dynamic page for /meetupId, 19 00:00:53,000 --> 00:00:56,000 a 404 page, which is actually generates 20 00:00:56,000 --> 00:00:59,000 for us automatically by default 21 00:00:59,000 --> 00:01:02,000 in case we enter a invalid URL. 22 00:01:02,000 --> 00:01:05,000 And the new-meetup page. 23 00:01:05,000 --> 00:01:09,000 And then we got these icons here next to the pages. 24 00:01:09,000 --> 00:01:13,000 A filled dot and three empty dots. 25 00:01:13,000 --> 00:01:16,000 If we scroll down, we see a legend here 26 00:01:16,000 --> 00:01:17,000 and we learn that a filled dot 27 00:01:17,000 --> 00:01:21,000 is a statically generated site, 28 00:01:21,000 --> 00:01:25,000 that's what SSG stands for, Static Site Generation, 29 00:01:25,000 --> 00:01:28,000 which was automatically generated as HTML 30 00:01:28,000 --> 00:01:32,000 and JSON, which is then used for pre-fetching data 31 00:01:32,000 --> 00:01:35,000 once the page turned into a single page application. 32 00:01:36,000 --> 00:01:40,000 The empty dot stands for Static Generation. 33 00:01:41,000 --> 00:01:42,000 That's almost the same. 34 00:01:42,000 --> 00:01:46,000 The only difference is that here we got no initial props. 35 00:01:46,000 --> 00:01:49,000 So we have no initial data that was fetched 36 00:01:49,000 --> 00:01:51,000 and indeed, only for the root page, 37 00:01:51,000 --> 00:01:53,000 we are fetching data 38 00:01:53,000 --> 00:01:56,000 because that is the page where we added getStaticProps 39 00:01:56,000 --> 00:01:58,000 and that's why we have the filled dot here. 40 00:01:58,000 --> 00:02:01,000 Now, we will work on some other pages later, 41 00:02:01,000 --> 00:02:04,000 to be precise, we will work on the meetupId page soon 42 00:02:04,000 --> 00:02:06,000 but, for example, the new-meetup page 43 00:02:06,000 --> 00:02:08,000 does not need any data fetching. 44 00:02:08,000 --> 00:02:13,000 There, we, in the end, only render our form 45 00:02:13,000 --> 00:02:15,000 and we don't need any data here, 46 00:02:15,000 --> 00:02:17,000 we don't fetch any data from a server 47 00:02:17,000 --> 00:02:19,000 and therefore, the new-meetup page 48 00:02:19,000 --> 00:02:23,000 will always stay a static page with no content. 49 00:02:23,000 --> 00:02:25,000 So that is fine. 50 00:02:25,000 --> 00:02:30,000 But we will turn the meetupId page into a SSG page later 51 00:02:30,000 --> 00:02:31,000 but for the moment, 52 00:02:31,000 --> 00:02:32,000 we see that only the starting page, 53 00:02:32,000 --> 00:02:37,000 the root page is such a statically generated site. 54 00:02:37,000 --> 00:02:40,000 Now, with that, let's start the development server again 55 00:02:40,000 --> 00:02:42,000 and let's think about potential problems 56 00:02:42,000 --> 00:02:46,000 we could be facing when using getStaticProps. 57 00:02:46,000 --> 00:02:48,000 And one pretty big problem, 58 00:02:48,000 --> 00:02:51,000 which we could face in some websites, 59 00:02:51,000 --> 00:02:53,000 depending on what we're doing 60 00:02:53,000 --> 00:02:57,000 is that the data here could be outdated. 61 00:02:57,000 --> 00:02:59,000 This page, as I mentioned, is generated 62 00:02:59,000 --> 00:03:01,000 during the build process. 63 00:03:01,000 --> 00:03:03,000 So thereafter, we deploy it. 64 00:03:03,000 --> 00:03:06,000 If we then add more meetups to our database, 65 00:03:06,000 --> 00:03:09,000 this pre-generated page would not know about them. 66 00:03:09,000 --> 00:03:13,000 And if we don't add any client-side data fetching, 67 00:03:13,000 --> 00:03:16,000 we would always just see the outdated meetups here. 68 00:03:16,000 --> 00:03:19,000 And this could, of course, be a problem. 69 00:03:19,000 --> 00:03:22,000 Now, we can always rebuild our site 70 00:03:22,000 --> 00:03:25,000 and redeploy when our data changes. 71 00:03:25,000 --> 00:03:28,000 And for some websites, like personal blogs, 72 00:03:28,000 --> 00:03:29,000 this is a great alternative 73 00:03:29,000 --> 00:03:33,000 because there data doesn't change too frequently 74 00:03:33,000 --> 00:03:36,000 but if data does change more frequently, 75 00:03:36,000 --> 00:03:38,000 there is a extra property, 76 00:03:38,000 --> 00:03:41,000 which we can add to this returned object. 77 00:03:41,000 --> 00:03:45,000 And that's the revalidate property. 78 00:03:45,000 --> 00:03:48,000 When we add this property to the object returned 79 00:03:48,000 --> 00:03:52,000 by getStaticProps, we unlock a feature 80 00:03:52,000 --> 00:03:55,000 called incremental Static Generation. 81 00:03:55,000 --> 00:03:58,000 Revalidate wants a number, 82 00:03:58,000 --> 00:04:01,000 let's say 10, and this number is the number 83 00:04:01,000 --> 00:04:04,000 of seconds NextJS will wait 84 00:04:04,000 --> 00:04:07,000 until it regenerates this page 85 00:04:07,000 --> 00:04:09,000 for an incoming request. 86 00:04:10,000 --> 00:04:14,000 That means that with revalidate set to some number, 87 00:04:14,000 --> 00:04:17,000 this page will not just be generated 88 00:04:17,000 --> 00:04:19,000 during the build process. 89 00:04:19,000 --> 00:04:22,000 It will be generated there but not just 90 00:04:22,000 --> 00:04:25,000 but it will also be generated every couple of seconds 91 00:04:25,000 --> 00:04:29,000 on the server, at least if there are requests 92 00:04:29,000 --> 00:04:30,000 for this page. 93 00:04:30,000 --> 00:04:35,000 So that means that this page, with revalidate set to 10, 94 00:04:35,000 --> 00:04:38,000 would be regenerated on the server 95 00:04:38,000 --> 00:04:42,000 at least every 10 seconds if there are requests coming in 96 00:04:42,000 --> 00:04:43,000 for this page. 97 00:04:43,000 --> 00:04:46,000 And then these regenerated pages 98 00:04:46,000 --> 00:04:50,000 would replace the old pre-generated pages. 99 00:04:50,000 --> 00:04:52,000 And with that, you would ensure that your data 100 00:04:52,000 --> 00:04:55,000 is never older than 10 seconds. 101 00:04:55,000 --> 00:04:57,000 And therefore, the number of seconds 102 00:04:57,000 --> 00:04:58,000 you wanna use here depends 103 00:04:58,000 --> 00:05:01,000 on your data update frequency. 104 00:05:01,000 --> 00:05:05,000 If your data changes once every hour, 105 00:05:05,000 --> 00:05:09,000 then setting this to 3600 might be great. 106 00:05:09,000 --> 00:05:13,000 If it changes all the time, one second might be better. 107 00:05:13,000 --> 00:05:15,000 But whatever you set this number to, 108 00:05:15,000 --> 00:05:18,000 you will ensure that this page will occasionally 109 00:05:18,000 --> 00:05:23,000 be re pre-generated on the server after deployment 110 00:05:24,000 --> 00:05:26,000 so that you don't have to redeploy 111 00:05:26,000 --> 00:05:31,000 and rebuild all the time just because some data changed. 112 00:05:31,000 --> 00:05:33,000 It doesn't really matter to us here, 113 00:05:33,000 --> 00:05:36,000 especially not as long as we're just using this dummy array 114 00:05:36,000 --> 00:05:40,000 but it is an important feature you should know about 115 00:05:40,000 --> 00:05:42,000 and that is how you can set it.