1 00:00:00,000 --> 00:00:02,000 So in the previous lecture, 2 00:00:02,000 --> 00:00:07,000 we used client site data fetching to load the news data. 3 00:00:07,000 --> 00:00:10,000 And as a result, if you go to the news page 4 00:00:10,000 --> 00:00:13,000 and you inspect the source code, 5 00:00:13,000 --> 00:00:16,000 you will see that in there, you see a lot of content, 6 00:00:16,000 --> 00:00:20,000 but you won't see the actual news content here. 7 00:00:20,000 --> 00:00:21,000 If we search for Beaver, 8 00:00:21,000 --> 00:00:24,000 which is part of one of the news headlines, 9 00:00:24,000 --> 00:00:26,000 we don't have any match in here, 10 00:00:26,000 --> 00:00:30,000 because the content that's generated on the server, 11 00:00:30,000 --> 00:00:33,000 the page content that's generated there 12 00:00:33,000 --> 00:00:35,000 does not include those news 13 00:00:35,000 --> 00:00:37,000 because we fetch them on the client side 14 00:00:37,000 --> 00:00:39,000 with help of useEffect. 15 00:00:40,000 --> 00:00:42,000 Now, as you see, of course, that works, 16 00:00:42,000 --> 00:00:45,000 but as I mentioned at the end of the last lecture already, 17 00:00:45,000 --> 00:00:50,000 this is not the best way of fetching data when using NextJS 18 00:00:50,000 --> 00:00:51,000 because even though that is 19 00:00:51,000 --> 00:00:54,000 how you can fetch data in any React app, 20 00:00:54,000 --> 00:00:58,000 NextJS offers better ways of fetching data, 21 00:00:58,000 --> 00:01:02,000 because in NextJS, all those components, 22 00:01:02,000 --> 00:01:04,000 including all those page components 23 00:01:04,000 --> 00:01:09,000 as you learned by default, are React server components. 24 00:01:09,000 --> 00:01:14,000 So React components that are meant to execute on the server. 25 00:01:14,000 --> 00:01:15,000 And as it turns out, 26 00:01:15,000 --> 00:01:18,000 those React server components 27 00:01:18,000 --> 00:01:20,000 got some nice tricks up their sleeve. 28 00:01:20,000 --> 00:01:24,000 Most importantly, you can fetch data 29 00:01:24,000 --> 00:01:29,000 directly inside of them and decorate the component functions 30 00:01:29,000 --> 00:01:32,000 with async in order to use async/await. 31 00:01:33,000 --> 00:01:35,000 So put in other words, 32 00:01:35,000 --> 00:01:39,000 React server components can return promises 33 00:01:39,000 --> 00:01:41,000 instead of just JSX, 34 00:01:41,000 --> 00:01:45,000 and that's something traditional client side 35 00:01:45,000 --> 00:01:47,000 React components can't do. 36 00:01:47,000 --> 00:01:50,000 But React server components can do that. 37 00:01:50,000 --> 00:01:52,000 And since NextJS supports them, 38 00:01:52,000 --> 00:01:56,000 you can therefore fetch data directly inside 39 00:01:56,000 --> 00:01:59,000 of those components when working with NextJS. 40 00:02:00,000 --> 00:02:02,000 Therefore, what we can do here 41 00:02:02,000 --> 00:02:05,000 is get rid of that use client directive again, 42 00:02:05,000 --> 00:02:08,000 to convert this back to a server component, 43 00:02:09,000 --> 00:02:11,000 get rid of useEffect here, 44 00:02:12,000 --> 00:02:14,000 and move this code here 45 00:02:14,000 --> 00:02:18,000 where we sent that request out of the fetch news function 46 00:02:18,000 --> 00:02:20,000 directly into the component function. 47 00:02:22,000 --> 00:02:26,000 We can and should now also get rid of all these states 48 00:02:27,000 --> 00:02:29,000 and of all that code here 49 00:02:29,000 --> 00:02:32,000 that updates those different states. 50 00:02:32,000 --> 00:02:34,000 I'll just keep this line of code 51 00:02:34,000 --> 00:02:37,000 where I parse the response data, 52 00:02:37,000 --> 00:02:39,000 but I'll get rid of all that other code. 53 00:02:41,000 --> 00:02:42,000 That of course, 54 00:02:42,000 --> 00:02:44,000 also means that I'll get rid of these if checks 55 00:02:44,000 --> 00:02:47,000 and I'll show you how to still show error 56 00:02:47,000 --> 00:02:49,000 and loading fallbacks a little bit later. 57 00:02:49,000 --> 00:02:51,000 For now, we'll get rid of that. 58 00:02:52,000 --> 00:02:54,000 So now we have much simpler code here 59 00:02:54,000 --> 00:02:56,000 and we're sending that request 60 00:02:56,000 --> 00:02:59,000 from directly inside the component function, 61 00:02:59,000 --> 00:03:01,000 since it's such a server component. 62 00:03:03,000 --> 00:03:05,000 It's worth noting that this fetch function 63 00:03:05,000 --> 00:03:09,000 is available here, even though that code runs on the server 64 00:03:09,000 --> 00:03:13,000 because A, it's supported by Node.js 65 00:03:13,000 --> 00:03:16,000 which executes that server side code anyways. 66 00:03:16,000 --> 00:03:20,000 And B, NextJS extends this fetch function 67 00:03:20,000 --> 00:03:25,000 and adds some extra caching related features to it, 68 00:03:25,000 --> 00:03:27,000 though that's not too important here. 69 00:03:27,000 --> 00:03:30,000 We'll take a closer look at caching 70 00:03:30,000 --> 00:03:35,000 and what NextJS does for you in the next course sections. 71 00:03:35,000 --> 00:03:38,000 So for now, it's just important to understand 72 00:03:38,000 --> 00:03:39,000 that you can use fetch 73 00:03:39,000 --> 00:03:43,000 directly inside of a component function. 74 00:03:43,000 --> 00:03:45,000 Of course, now we can and should also remove the useEffect 75 00:03:45,000 --> 00:03:47,000 and useState imports. 76 00:03:49,000 --> 00:03:52,000 Now the request could still fail, 77 00:03:52,000 --> 00:03:56,000 so I still wanna check if not response okay, 78 00:03:56,000 --> 00:03:59,000 and in that case, I'll just throw a new error 79 00:03:59,000 --> 00:04:02,000 where I'll say, failed to fetch news, 80 00:04:02,000 --> 00:04:05,000 and we'll handle that error a little bit later. 81 00:04:05,000 --> 00:04:08,000 For the moment, let's focus on outputting the news. 82 00:04:08,000 --> 00:04:10,000 How would that work? 83 00:04:10,000 --> 00:04:14,000 Well, we don't need to check whether they're defined or not 84 00:04:14,000 --> 00:04:16,000 because now since we have a async component, 85 00:04:16,000 --> 00:04:20,000 we wait until the response data is there anyways. 86 00:04:20,000 --> 00:04:24,000 No JSX code gets generated before that data is there. 87 00:04:24,000 --> 00:04:28,000 So we won't have a scenario where news is undefined 88 00:04:28,000 --> 00:04:30,000 unless the backend returns undefined, 89 00:04:30,000 --> 00:04:33,000 which my dummy backend here doesn't do though. 90 00:04:33,000 --> 00:04:37,000 It always returns this array of news. 91 00:04:37,000 --> 00:04:40,000 So therefore, this check is not required anymore. 92 00:04:40,000 --> 00:04:44,000 And hence, we can again move that news list component 93 00:04:44,000 --> 00:04:46,000 down into the returned JSX code 94 00:04:46,000 --> 00:04:48,000 and get rid of that extra variable. 95 00:04:50,000 --> 00:04:51,000 And that's therefore, 96 00:04:51,000 --> 00:04:55,000 all the code it takes when using NextJS features 97 00:04:55,000 --> 00:04:59,000 to fetch data directly on the server 98 00:04:59,000 --> 00:05:02,000 inside of the component function and to output it. 99 00:05:03,000 --> 00:05:04,000 And therefore, now if we save that 100 00:05:04,000 --> 00:05:06,000 and reload that news page, 101 00:05:06,000 --> 00:05:10,000 you see, the news data is there directly on the page. 102 00:05:10,000 --> 00:05:14,000 But now if we take a look at the page source code, 103 00:05:14,000 --> 00:05:17,000 we will also see that all the news content is in there. 104 00:05:17,000 --> 00:05:20,000 So it was rendered on the server. 105 00:05:21,000 --> 00:05:25,000 And that of course, for example, gives us an SEO advantage. 106 00:05:25,000 --> 00:05:30,000 And hence, fetching data directly inside of the component 107 00:05:30,000 --> 00:05:34,000 is the standard approach you should use when using NextJS.