1 00:00:02,000 --> 00:00:04,000 Now, before we dig deeper, 2 00:00:04,000 --> 00:00:06,000 I again want to show this pre-rendering 3 00:00:06,000 --> 00:00:10,000 of multiple instances of this page, inaction. 4 00:00:10,000 --> 00:00:11,000 And for this again, 5 00:00:11,000 --> 00:00:15,000 we can run this NPM run build command here 6 00:00:15,000 --> 00:00:17,000 to build this for production. 7 00:00:17,000 --> 00:00:19,000 So NPM run build, 8 00:00:19,000 --> 00:00:20,000 and what this will do is it 9 00:00:20,000 --> 00:00:23,000 will create an optimized production build again, 10 00:00:23,000 --> 00:00:27,000 pre-rendering all the pages it needs to pre-render. 11 00:00:27,000 --> 00:00:30,000 And then we see what it did here again. 12 00:00:30,000 --> 00:00:33,000 We see that it pre-rendered a couple of pages. 13 00:00:33,000 --> 00:00:36,000 It generated five pages in the end here. 14 00:00:36,000 --> 00:00:40,000 We see that for the starting page for a slash nothing. 15 00:00:40,000 --> 00:00:42,000 So for this index JS file, 16 00:00:42,000 --> 00:00:47,000 it recognized this 10 seconds revalidation period. 17 00:00:47,000 --> 00:00:49,000 And we see that for this dynamic page here 18 00:00:49,000 --> 00:00:51,000 it generated three instances 19 00:00:51,000 --> 00:00:54,000 for P one, P two, P three 20 00:00:54,000 --> 00:00:55,000 which makes a lot of sense 21 00:00:55,000 --> 00:00:58,000 because these are the parent values I'm returning here 22 00:00:58,000 --> 00:01:00,000 in get static pulse. 23 00:01:00,000 --> 00:01:03,000 It also pre-generated the 404 page 24 00:01:03,000 --> 00:01:05,000 just as it did before already. 25 00:01:06,000 --> 00:01:07,000 Now we can also see this 26 00:01:07,000 --> 00:01:10,000 if we dive into the next folder again, 27 00:01:10,000 --> 00:01:12,000 into server pages. 28 00:01:12,000 --> 00:01:17,000 Here we see the HTML files for those different parameters. 29 00:01:17,000 --> 00:01:21,000 We also see the json files for pre-loading that data 30 00:01:21,000 --> 00:01:25,000 if we would navigate to such a page through a link. 31 00:01:25,000 --> 00:01:27,000 So after we already are on the page. 32 00:01:27,000 --> 00:01:30,000 Not for the initial page load. 33 00:01:30,000 --> 00:01:33,000 And if we have a look at those HTML files, 34 00:01:33,000 --> 00:01:35,000 in there, of course, ultimately 35 00:01:35,000 --> 00:01:40,000 somewhere we will see our product one text. 36 00:01:41,000 --> 00:01:42,000 Here it is. 37 00:01:42,000 --> 00:01:45,000 So we see that here as well. 38 00:01:45,000 --> 00:01:50,000 Now I can also show you that pre fetching of data though 39 00:01:50,000 --> 00:01:54,000 because in index JS, we do render some links. 40 00:01:54,000 --> 00:01:57,000 So now if I do run NPM, start here. 41 00:01:57,000 --> 00:02:01,000 If I do that to start that production server 42 00:02:01,000 --> 00:02:02,000 on our local machine, 43 00:02:02,000 --> 00:02:05,000 with that build project. If I reload 44 00:02:05,000 --> 00:02:07,000 we get these clickable links. 45 00:02:07,000 --> 00:02:09,000 And if you now open the developer tools here 46 00:02:09,000 --> 00:02:11,000 and go to the network tab. 47 00:02:11,000 --> 00:02:14,000 If I now reload, local host 3000 48 00:02:14,000 --> 00:02:16,000 you'll see something interesting. 49 00:02:16,000 --> 00:02:20,000 You see here, are requests to P one JSON, 50 00:02:20,000 --> 00:02:23,000 P two JSON and P three JSON. 51 00:02:23,000 --> 00:02:26,000 And if you click on them, you see what was fetched. 52 00:02:26,000 --> 00:02:30,000 And in the end here, it pre fetched the props for the 53 00:02:30,000 --> 00:02:32,000 that would need to be loaded 54 00:02:32,000 --> 00:02:34,000 if you click on one of these links. 55 00:02:34,000 --> 00:02:37,000 So in the end here, it pre fetched that data 56 00:02:37,000 --> 00:02:40,000 even before I hovered over the links 57 00:02:40,000 --> 00:02:43,000 just because I'm on this page. 58 00:02:43,000 --> 00:02:46,000 Now the exact point of time when data is pre fetched, 59 00:02:46,000 --> 00:02:49,000 that's something figured out and done by next to JS. 60 00:02:49,000 --> 00:02:52,000 The important part for us here is that 61 00:02:52,000 --> 00:02:55,000 it does that pre fetching for us. 62 00:02:55,000 --> 00:02:57,000 Now, when we now click on a link, 63 00:02:57,000 --> 00:02:58,000 we're not sending a new request 64 00:02:58,000 --> 00:03:03,000 to the server and load the pre-rendered HTML file. 65 00:03:03,000 --> 00:03:06,000 Instead we stay in this single page application now. 66 00:03:06,000 --> 00:03:08,000 We stay here in this react application 67 00:03:08,000 --> 00:03:13,000 which was loaded and hydrated after this initial request. 68 00:03:13,000 --> 00:03:17,000 So in the end now Java script will render a new page for uS. 69 00:03:17,000 --> 00:03:22,000 Just as it would do in a regular react app without next JS. 70 00:03:22,000 --> 00:03:25,000 But the data needed for this page is coming 71 00:03:25,000 --> 00:03:29,000 from the pre fetched JSON file, which it loaded and 72 00:03:29,000 --> 00:03:32,000 read under the hood on our behalf. 73 00:03:32,000 --> 00:03:35,000 So that it doesn't need to fetch the data 74 00:03:35,000 --> 00:03:37,000 after we navigated to that page. 75 00:03:37,000 --> 00:03:40,000 But so that the data is already there 76 00:03:40,000 --> 00:03:41,000 when we do navigate. 77 00:03:41,000 --> 00:03:46,000 To show this final product one page even faster. 78 00:03:46,000 --> 00:03:48,000 And that's another neat feature built 79 00:03:48,000 --> 00:03:51,000 into next JS, which we get for free. 80 00:03:51,000 --> 00:03:53,000 So to say. 81 00:03:53,000 --> 00:03:56,000 Now let's again explore this fallback key here 82 00:03:56,000 --> 00:03:57,000 in greater detail.