1 00:00:02,000 --> 00:00:04,000 Now that we got the getAllPosts 2 00:00:04,000 --> 00:00:07,000 and getFeaturedPosts functions, let's use them. 3 00:00:07,000 --> 00:00:09,000 For example, on the starting page 4 00:00:09,000 --> 00:00:14,000 so that there we can get rid of that DUMMY_POSTS array 5 00:00:14,000 --> 00:00:17,000 and instead we load posts from our own data source. 6 00:00:17,000 --> 00:00:21,000 And when it comes to fetching data for a page, 7 00:00:21,000 --> 00:00:23,000 we also learned how that works. 8 00:00:23,000 --> 00:00:28,000 We wanna use getStaticProps or getServerSideProps. 9 00:00:28,000 --> 00:00:31,000 In reality, of course, we don't need either of the two. 10 00:00:31,000 --> 00:00:36,000 We could also use useEffect inside of our component 11 00:00:36,000 --> 00:00:40,000 and send an HTTP request to some API. 12 00:00:40,000 --> 00:00:42,000 But that means that the pre-rendered page 13 00:00:42,000 --> 00:00:45,000 won't contain any content, 14 00:00:45,000 --> 00:00:47,000 which isn't great for search engines 15 00:00:47,000 --> 00:00:49,000 and in this specific website here, 16 00:00:49,000 --> 00:00:51,000 we would also have a problem. 17 00:00:51,000 --> 00:00:54,000 We have no API. 18 00:00:54,000 --> 00:00:56,000 Our posts are fetched from the file system. 19 00:00:56,000 --> 00:00:59,000 And we can therefore do that in any code 20 00:00:59,000 --> 00:01:02,000 that runs on the server side 21 00:01:02,000 --> 00:01:04,000 and has access to that file system 22 00:01:04,000 --> 00:01:06,000 but we can't do it from inside our components. 23 00:01:06,000 --> 00:01:09,000 Those don't have access to the file system 24 00:01:09,000 --> 00:01:13,000 and there, we also can't send a request to any API 25 00:01:13,000 --> 00:01:14,000 that grants that access 26 00:01:14,000 --> 00:01:17,000 because we have no such API here. 27 00:01:17,000 --> 00:01:19,000 We could build an API route 28 00:01:19,000 --> 00:01:21,000 but why would we do that? 29 00:01:21,000 --> 00:01:23,000 Then we would be able to fetch data 30 00:01:23,000 --> 00:01:25,000 without having it pre-rendered 31 00:01:25,000 --> 00:01:29,000 and we would still have the search engine disadvantage. 32 00:01:29,000 --> 00:01:32,000 Therefore, it definitely makes most sense here 33 00:01:32,000 --> 00:01:36,000 to add the separate getStaticProps function here. 34 00:01:40,000 --> 00:01:43,000 In here, we wanna get all the featured posts 35 00:01:43,000 --> 00:01:45,000 and that's super simple 36 00:01:45,000 --> 00:01:48,000 because in that lib folder in which we just worked, 37 00:01:48,000 --> 00:01:52,000 in that file there, we export a getFeaturedPosts function, 38 00:01:52,000 --> 00:01:54,000 which does just that. 39 00:01:54,000 --> 00:01:56,000 So here in getStaticProps, 40 00:01:56,000 --> 00:01:58,000 we can get our featuredPosts 41 00:01:58,000 --> 00:01:59,000 by calling getFeaturedPosts. 42 00:02:01,000 --> 00:02:02,000 And you just need to make sure 43 00:02:02,000 --> 00:02:04,000 that you add a import, 44 00:02:04,000 --> 00:02:07,000 importing getFeaturedPosts from that lib folder 45 00:02:07,000 --> 00:02:09,000 and the posts-util file. 46 00:02:11,000 --> 00:02:13,000 If you do that, you've got the featuredPosts here 47 00:02:13,000 --> 00:02:16,000 and then you learned earlier in the course 48 00:02:16,000 --> 00:02:17,000 that in getStaticProps, 49 00:02:17,000 --> 00:02:20,000 we should return an object with a props key 50 00:02:20,000 --> 00:02:24,000 where we then can pass any props of our choice 51 00:02:24,000 --> 00:02:25,000 to the component. 52 00:02:25,000 --> 00:02:27,000 Now, here I guess it makes sense 53 00:02:27,000 --> 00:02:32,000 to set a posts prop, which holds those loaded featuredPosts. 54 00:02:32,000 --> 00:02:36,000 And that's already all we have to do in getStaticProps here. 55 00:02:36,000 --> 00:02:39,000 Nothing else is required for this use case. 56 00:02:39,000 --> 00:02:42,000 Now, we could also be using getServerSideProps 57 00:02:45,000 --> 00:02:48,000 to always fetch all the featuredPosts 58 00:02:48,000 --> 00:02:50,000 when a request reaches this page 59 00:02:50,000 --> 00:02:52,000 but that doesn't make sense here I would say. 60 00:02:52,000 --> 00:02:55,000 It will just slow down this page a lot 61 00:02:55,000 --> 00:02:57,000 because we have to go through all the files 62 00:02:57,000 --> 00:03:00,000 and go through all the posts for every request 63 00:03:00,000 --> 00:03:02,000 without gaining much. 64 00:03:02,000 --> 00:03:06,000 Our posts will probably not change every second. 65 00:03:06,000 --> 00:03:09,000 After all, we have to change our Markdown file 66 00:03:09,000 --> 00:03:11,000 to update them. 67 00:03:11,000 --> 00:03:14,000 So they are fairly stable. 68 00:03:14,000 --> 00:03:17,000 Most posts will probably never change. 69 00:03:17,000 --> 00:03:20,000 So getStaticProps makes sense. 70 00:03:20,000 --> 00:03:23,000 Now, we could add the revalidate key here 71 00:03:23,000 --> 00:03:25,000 to make it clear that getStaticProps 72 00:03:25,000 --> 00:03:30,000 should not just be executed once during the build process 73 00:03:30,000 --> 00:03:34,000 as you learned but also at least once every 100 seconds 74 00:03:34,000 --> 00:03:37,000 or every 60 seconds or whatever you want 75 00:03:37,000 --> 00:03:39,000 for a new incoming request. 76 00:03:39,000 --> 00:03:42,000 This would ensure that if our data changed 77 00:03:42,000 --> 00:03:47,000 after deployment, we still regenerate our posts 78 00:03:47,000 --> 00:03:50,000 and we therefore reflect that latest data 79 00:03:50,000 --> 00:03:53,000 without rebuilding and redeploying. 80 00:03:53,000 --> 00:03:55,000 We could do that but again, 81 00:03:55,000 --> 00:03:58,000 our posts will probably not change that much. 82 00:03:58,000 --> 00:04:00,000 So if you wanna set revalidate 83 00:04:00,000 --> 00:04:04,000 to have that built-in rebuilding step, 84 00:04:04,000 --> 00:04:07,000 you wanna definitely set it to a long duration, 85 00:04:07,000 --> 00:04:12,000 maybe 10 minutes or even longer, like half an hour 86 00:04:12,000 --> 00:04:14,000 and here I will not set it at all, 87 00:04:14,000 --> 00:04:16,000 which means getStaticProps 88 00:04:16,000 --> 00:04:20,000 will only be executed once outside of development, 89 00:04:20,000 --> 00:04:25,000 during development it will be executed for every request 90 00:04:26,000 --> 00:04:27,000 but outside of development, 91 00:04:27,000 --> 00:04:31,000 it will only be executed when we build the application 92 00:04:31,000 --> 00:04:34,000 for production and never thereafter. 93 00:04:34,000 --> 00:04:37,000 And I would say this is absolutely fine here 94 00:04:37,000 --> 00:04:38,000 for this scenario. 95 00:04:39,000 --> 00:04:43,000 Okay, so now with that, we have getStaticProps, 96 00:04:43,000 --> 00:04:44,000 we set the posts prop, 97 00:04:44,000 --> 00:04:46,000 which holds the featuredPosts 98 00:04:46,000 --> 00:04:48,000 and that means that in HomePage, 99 00:04:48,000 --> 00:04:50,000 we should accept props 100 00:04:50,000 --> 00:04:54,000 and then pass props.posts as a value 101 00:04:54,000 --> 00:04:56,000 to the posts prop on FeaturedPosts. 102 00:04:57,000 --> 00:04:59,000 If you now save all of that 103 00:04:59,000 --> 00:05:02,000 and we go back to the starting page, 104 00:05:02,000 --> 00:05:06,000 there we should see one featured post now 105 00:05:06,000 --> 00:05:10,000 and now here, the data is actually coming 106 00:05:10,000 --> 00:05:12,000 from our Markdown file. 107 00:05:12,000 --> 00:05:15,000 So if I change something there like the date 108 00:05:15,000 --> 00:05:18,000 from 15th to 16th, 109 00:05:18,000 --> 00:05:20,000 then since we're in development 110 00:05:20,000 --> 00:05:24,000 and getStaticProps runs for every request, 111 00:05:24,000 --> 00:05:25,000 when we'll see that if I reload, 112 00:05:25,000 --> 00:05:29,000 this switched to 16th as well. 113 00:05:29,000 --> 00:05:32,000 So this data is coming from the Markdown file. 114 00:05:32,000 --> 00:05:34,000 And now we can do something similar 115 00:05:34,000 --> 00:05:36,000 in the All Posts page. 116 00:05:36,000 --> 00:05:39,000 Of course, feel free to try this on your own first. 117 00:05:39,000 --> 00:05:41,000 Here is your chance to pause the video 118 00:05:41,000 --> 00:05:43,000 and try it on your own first. 119 00:05:43,000 --> 00:05:45,000 After a short pause, we'll implement it together. 120 00:05:49,000 --> 00:05:51,000 Were you successful? 121 00:05:51,000 --> 00:05:55,000 Let's implement it together on that All Posts page. 122 00:05:55,000 --> 00:05:58,000 There it's very similar to the starting page. 123 00:05:58,000 --> 00:06:01,000 So here in posts, index.js, 124 00:06:01,000 --> 00:06:03,000 we don't wanna use the DUMMY_POSTS any more, 125 00:06:03,000 --> 00:06:05,000 we wanna get rid of that. 126 00:06:05,000 --> 00:06:10,000 Instead, we wanna fetch posts from our actual data source. 127 00:06:10,000 --> 00:06:12,000 And again, for this, I'll use getStaticProps. 128 00:06:14,000 --> 00:06:17,000 So I'll export a function getStaticProps 129 00:06:17,000 --> 00:06:19,000 to fetch my posts here. 130 00:06:19,000 --> 00:06:23,000 Again, getServerSideProps makes no sense for me 131 00:06:23,000 --> 00:06:27,000 because we don't want to fetch all the posts 132 00:06:27,000 --> 00:06:28,000 for every request. 133 00:06:28,000 --> 00:06:31,000 That would not be that great for performance. 134 00:06:31,000 --> 00:06:34,000 Instead, doing it once during the build process 135 00:06:34,000 --> 00:06:35,000 should be enough. 136 00:06:35,000 --> 00:06:38,000 If we ever update our files thereafter 137 00:06:38,000 --> 00:06:40,000 and we wanna reflect those changes, 138 00:06:40,000 --> 00:06:42,000 we just have to rebuild and redeploy 139 00:06:42,000 --> 00:06:46,000 but we're probably not doing that multiple times every day. 140 00:06:46,000 --> 00:06:48,000 And if we ever add a new post, 141 00:06:48,000 --> 00:06:51,000 since it's part of the overall project folder, 142 00:06:51,000 --> 00:06:53,000 we will need to redeploy anyways. 143 00:06:53,000 --> 00:06:56,000 So that also won't be a problem. 144 00:06:56,000 --> 00:07:00,000 Hence here again I will just call getAllPosts 145 00:07:00,000 --> 00:07:02,000 and make sure to add that import 146 00:07:02,000 --> 00:07:05,000 to the getAllPosts function here. 147 00:07:07,000 --> 00:07:10,000 And this then gives us all the posts 148 00:07:10,000 --> 00:07:12,000 and we then just return an object 149 00:07:12,000 --> 00:07:16,000 with the props key, which holds the props object 150 00:07:16,000 --> 00:07:19,000 where we can set posts to allPosts. 151 00:07:20,000 --> 00:07:22,000 Again, we could add revalidate 152 00:07:22,000 --> 00:07:24,000 but for the reasons explained before, 153 00:07:24,000 --> 00:07:25,000 I'll not do it here 154 00:07:25,000 --> 00:07:27,000 because if we add a new post, 155 00:07:27,000 --> 00:07:30,000 we'll have to redeploy anyways 156 00:07:30,000 --> 00:07:33,000 since it's part of the overall project folder 157 00:07:33,000 --> 00:07:35,000 and if we change an existing post, 158 00:07:35,000 --> 00:07:36,000 we can also redeploy. 159 00:07:36,000 --> 00:07:40,000 We're probably not doing that all the time. 160 00:07:40,000 --> 00:07:42,000 Hence now here in the AllPostsPage, 161 00:07:42,000 --> 00:07:44,000 we get our props now 162 00:07:44,000 --> 00:07:47,000 and we now use props.posts, 163 00:07:47,000 --> 00:07:50,000 since I used posts here as a value for posts 164 00:07:50,000 --> 00:07:55,000 on AllPosts and yes, that is a lot of posts, I know. 165 00:07:55,000 --> 00:07:57,000 But now with that, if we save this, 166 00:07:58,000 --> 00:08:00,000 and reload the All Posts page, 167 00:08:00,000 --> 00:08:01,000 we only got one post left here 168 00:08:01,000 --> 00:08:04,000 and that is that one single post 169 00:08:04,000 --> 00:08:07,000 for which we added a Markdown file. 170 00:08:07,000 --> 00:08:10,000 Let's now work on the single post page 171 00:08:10,000 --> 00:08:12,000 and let's fetch the actual post data 172 00:08:12,000 --> 00:08:14,000 from the Markdown file here as well 173 00:08:14,000 --> 00:08:17,000 and let's make sure that everything is output correctly.