1 00:00:00,000 --> 00:00:03,000 Now, this is now the best way 2 00:00:03,000 --> 00:00:07,000 of fetching data in a NextJS application 3 00:00:07,000 --> 00:00:12,000 if you own the data source, so if you own the database. 4 00:00:12,000 --> 00:00:15,000 If you have an external API, you, of course, 5 00:00:15,000 --> 00:00:18,000 will need to send an HTTP request, 6 00:00:18,000 --> 00:00:20,000 but if you own the database, 7 00:00:20,000 --> 00:00:22,000 you can move it into your NextJS project 8 00:00:22,000 --> 00:00:25,000 and reach out to it like we're doing it here. 9 00:00:26,000 --> 00:00:29,000 Now, as I mentioned, the nice thing about SQLite 10 00:00:29,000 --> 00:00:31,000 and the package we're using 11 00:00:31,000 --> 00:00:34,000 is that it's actually a synchronous package 12 00:00:34,000 --> 00:00:37,000 and we don't even need to use async await, 13 00:00:37,000 --> 00:00:42,000 but I actually wanna simulate a slower response here, 14 00:00:43,000 --> 00:00:45,000 and therefore, I will actually turn this 15 00:00:45,000 --> 00:00:47,000 into an async function, 16 00:00:47,000 --> 00:00:52,000 even though the SQL package we're using would not need it, 17 00:00:52,000 --> 00:00:54,000 but I'll add async here 18 00:00:54,000 --> 00:00:58,000 so that I can then await a new promise, 19 00:00:58,000 --> 00:01:02,000 which I only add here so that I can add a short delay, 20 00:01:02,000 --> 00:01:03,000 because I also wanna show you 21 00:01:03,000 --> 00:01:07,000 how to handle loading states, for example. 22 00:01:07,000 --> 00:01:11,000 So this promise constructor gets a function as an argument 23 00:01:11,000 --> 00:01:14,000 which automatically receives a resolve function, 24 00:01:14,000 --> 00:01:17,000 and then here, I'll simply call set timeout, 25 00:01:17,000 --> 00:01:20,000 and I'll set a timeout of two seconds, 26 00:01:20,000 --> 00:01:23,000 and resolve should be triggered after these two seconds, 27 00:01:24,000 --> 00:01:27,000 and I await this promise then. 28 00:01:27,000 --> 00:01:28,000 So this will make sure 29 00:01:28,000 --> 00:01:31,000 that we simply add a two-second delay here 30 00:01:31,000 --> 00:01:35,000 to simulate a slower backend process 31 00:01:35,000 --> 00:01:39,000 or simulate a database that's slower, because again, 32 00:01:39,000 --> 00:01:42,000 I wanna show you how to handle loading states. 33 00:01:43,000 --> 00:01:47,000 With that, now that we're using async await here, 34 00:01:47,000 --> 00:01:50,000 get all news does no longer directly return 35 00:01:50,000 --> 00:01:55,000 an array of news, but instead, it'll now return a promise, 36 00:01:55,000 --> 00:02:00,000 which will eventually yield an array of news. 37 00:02:00,000 --> 00:02:04,000 Therefore, the code in the page.js file must be adjusted 38 00:02:04,000 --> 00:02:08,000 because we can no longer call get all news like this. 39 00:02:09,000 --> 00:02:12,000 But that's no problem, because as I mentioned 40 00:02:12,000 --> 00:02:14,000 and showed you before already, 41 00:02:14,000 --> 00:02:17,000 you can decorate your component functions 42 00:02:17,000 --> 00:02:21,000 with async if they're React server components, 43 00:02:21,000 --> 00:02:22,000 which this one is. 44 00:02:23,000 --> 00:02:26,000 So hence, we can simply add await here, and we're good. 45 00:02:26,000 --> 00:02:29,000 That's all we have to do to fetch those news. 46 00:02:30,000 --> 00:02:33,000 If we now save that and reload, 47 00:02:33,000 --> 00:02:35,000 we still get that page with the news, but actually, 48 00:02:35,000 --> 00:02:39,000 you will see that if you're on a different page 49 00:02:39,000 --> 00:02:41,000 and you reload there to make sure 50 00:02:41,000 --> 00:02:45,000 that NextJS loses its cache and you click on news again, 51 00:02:45,000 --> 00:02:47,000 nothing seems to happen initially, 52 00:02:47,000 --> 00:02:49,000 and then only once the data is there 53 00:02:49,000 --> 00:02:51,000 do we navigate to this page. 54 00:02:52,000 --> 00:02:53,000 This does not happen thereafter 55 00:02:53,000 --> 00:02:57,000 because NextJS actually caches this page, 56 00:02:57,000 --> 00:02:59,000 but it happens during development 57 00:02:59,000 --> 00:03:01,000 if you reload some other page 58 00:03:01,000 --> 00:03:03,000 and then try to go back to news. 59 00:03:03,000 --> 00:03:06,000 And that's, of course, not a great user experience, 60 00:03:06,000 --> 00:03:09,000 because it seems as if nothing's happening 61 00:03:09,000 --> 00:03:11,000 after clicking on news 62 00:03:11,000 --> 00:03:13,000 until we suddenly switch to that page. 63 00:03:14,000 --> 00:03:17,000 It would be better to show some loading fallback, 64 00:03:17,000 --> 00:03:19,000 some loading spinner or loading text 65 00:03:19,000 --> 00:03:24,000 or some skeleton loader until the data is there, 66 00:03:24,000 --> 00:03:27,000 and adding such a loading fallback, thankfully, 67 00:03:27,000 --> 00:03:31,000 is pretty straightforward in NextJS. 68 00:03:31,000 --> 00:03:35,000 You can add a special file called loading.js 69 00:03:35,000 --> 00:03:39,000 next to the page that is loading data or on a higher level, 70 00:03:39,000 --> 00:03:42,000 and NextJS will automatically show the content 71 00:03:42,000 --> 00:03:46,000 of the component defined in this loading.js file 72 00:03:46,000 --> 00:03:49,000 until the data is there. 73 00:03:49,000 --> 00:03:53,000 So here, I can export my new function, 74 00:03:53,000 --> 00:03:57,000 news loading or whatever you wanna call it, 75 00:03:57,000 --> 00:03:59,000 and maybe just return this fallback text, 76 00:03:59,000 --> 00:04:03,000 though you could, of course, return any JSX content here, 77 00:04:03,000 --> 00:04:06,000 a loading spinner, whatever you need. 78 00:04:08,000 --> 00:04:12,000 Here, I'll keep it simple and just return this loading text, 79 00:04:12,000 --> 00:04:15,000 and with this loading.js file added here, 80 00:04:15,000 --> 00:04:18,000 it'll take care of showing us this loading text 81 00:04:18,000 --> 00:04:21,000 if a sibling or child page is loading. 82 00:04:22,000 --> 00:04:24,000 So therefore, now with that, 83 00:04:24,000 --> 00:04:27,000 if I go back to archive and reload and then click on news, 84 00:04:27,000 --> 00:04:31,000 we go there instantly, and we see that loading fallback. 85 00:04:31,000 --> 00:04:34,000 And that's, of course, now a better user experience, 86 00:04:34,000 --> 00:04:37,000 because now we got that instant navigation 87 00:04:37,000 --> 00:04:39,000 and we know what's going on. 88 00:04:39,000 --> 00:04:42,000 We understand that we're simply waiting for data, 89 00:04:42,000 --> 00:04:44,000 and that is how easy it is 90 00:04:44,000 --> 00:04:47,000 to add a loading fallback with NextJS.