1 00:00:00,000 --> 00:00:01,000 Okay. 2 00:00:01,000 --> 00:00:03,000 Now that we got this second page here, 3 00:00:03,000 --> 00:00:05,000 it would of course also be great 4 00:00:05,000 --> 00:00:07,000 if we could get to this page 5 00:00:07,000 --> 00:00:11,000 in any other way than manually updating the URL, 6 00:00:11,000 --> 00:00:13,000 because no one does that. 7 00:00:13,000 --> 00:00:16,000 It would be nice to have a link to that second page. 8 00:00:17,000 --> 00:00:20,000 And for that, on that starting page, 9 00:00:20,000 --> 00:00:23,000 we could add a new paragraph here, 10 00:00:24,000 --> 00:00:27,000 and then maybe add an anchor element 11 00:00:28,000 --> 00:00:30,000 where we say About Us. 12 00:00:31,000 --> 00:00:34,000 And here the address then could be /about, 13 00:00:34,000 --> 00:00:35,000 to go to that page. 14 00:00:38,000 --> 00:00:42,000 With that done, indeed, we have that link here, 15 00:00:42,000 --> 00:00:45,000 and if I click it, I'm taken to this About Us page. 16 00:00:46,000 --> 00:00:49,000 But this approach now has a flaw. 17 00:00:49,000 --> 00:00:53,000 It's not ideal, and you can see that there is a flaw 18 00:00:53,000 --> 00:00:56,000 if you take a look at this refresh icon up here, 19 00:00:57,000 --> 00:00:59,000 as I click About Us, 20 00:00:59,000 --> 00:01:02,000 you will see that it briefly turns to a cross, 21 00:01:02,000 --> 00:01:04,000 which always is a sign 22 00:01:04,000 --> 00:01:08,000 that a brand new page was downloaded from the backend. 23 00:01:08,000 --> 00:01:11,000 So, we left the current page and got a brand new page. 24 00:01:12,000 --> 00:01:16,000 The disadvantage with that is that we now no longer 25 00:01:16,000 --> 00:01:18,000 have a single-page application 26 00:01:18,000 --> 00:01:22,000 as we normally do when working with React. 27 00:01:22,000 --> 00:01:24,000 Now, of course, to some extent that makes sense, 28 00:01:24,000 --> 00:01:27,000 because I mentioned that with NextJS, 29 00:01:27,000 --> 00:01:30,000 you would build full-stack applications 30 00:01:30,000 --> 00:01:32,000 where the content is rendered on the backend, 31 00:01:32,000 --> 00:01:34,000 and therefore it makes sense 32 00:01:34,000 --> 00:01:36,000 that it's no longer happening in the front-end 33 00:01:36,000 --> 00:01:37,000 on the client side. 34 00:01:37,000 --> 00:01:40,000 But actually the great thing about NextJS 35 00:01:40,000 --> 00:01:42,000 is that we get both. 36 00:01:42,000 --> 00:01:45,000 When we visit a page for the first time 37 00:01:45,000 --> 00:01:49,000 by, for example, manually entering the URL, 38 00:01:49,000 --> 00:01:52,000 then indeed it's rendered on the server, 39 00:01:52,000 --> 00:01:54,000 we get the finished page, and we're here. 40 00:01:55,000 --> 00:01:58,000 But if we are on a page 41 00:01:58,000 --> 00:02:01,000 and we then navigate around by clicking links, for example, 42 00:02:01,000 --> 00:02:03,000 NextJS allows us 43 00:02:03,000 --> 00:02:07,000 to actually stay in a single-page application 44 00:02:07,000 --> 00:02:11,000 and update the UI with help of client-side JavaScript code. 45 00:02:12,000 --> 00:02:15,000 Now, technically the content of the Next page 46 00:02:15,000 --> 00:02:18,000 will still be pre-rendered on the server, 47 00:02:18,000 --> 00:02:21,000 but it will then be updated on the client side 48 00:02:21,000 --> 00:02:25,000 with client-side JavaScript code, you could say. 49 00:02:25,000 --> 00:02:28,000 And therefore you can get the best of both worlds, 50 00:02:28,000 --> 00:02:31,000 a highly interactive, reactive client-side application 51 00:02:31,000 --> 00:02:33,000 once it's active, 52 00:02:33,000 --> 00:02:35,000 but a finished page being served 53 00:02:35,000 --> 00:02:37,000 if you are visiting the page for the first time, 54 00:02:37,000 --> 00:02:40,000 so, if you did not navigate around on it yet. 55 00:02:41,000 --> 00:02:44,000 However, at the moment, we're not getting this benefit. 56 00:02:44,000 --> 00:02:47,000 With that link here, the page is always reloading, 57 00:02:47,000 --> 00:02:51,000 and we're not in that single-page application. 58 00:02:51,000 --> 00:02:52,000 And the reason for that 59 00:02:52,000 --> 00:02:55,000 is that we're using the regular anchor element. 60 00:02:55,000 --> 00:02:58,000 That works, but it does 61 00:02:58,000 --> 00:03:00,000 get us out of that single-page application. 62 00:03:01,000 --> 00:03:03,000 In order to stay in there, 63 00:03:03,000 --> 00:03:06,000 we have to use a special component called Link, 64 00:03:06,000 --> 00:03:10,000 which we can import from next/link. 65 00:03:11,000 --> 00:03:15,000 This is a component provided by the NextJS framework, 66 00:03:15,000 --> 00:03:18,000 which you should use instead of the anchor element 67 00:03:18,000 --> 00:03:22,000 if you have some internal link as we have it here. 68 00:03:22,000 --> 00:03:23,000 So, if you have a link that leads 69 00:03:23,000 --> 00:03:25,000 to another page of your website. 70 00:03:27,000 --> 00:03:29,000 It then still takes the ref prop 71 00:03:29,000 --> 00:03:31,000 and you could still also add other props 72 00:03:31,000 --> 00:03:34,000 like className and so on. 73 00:03:34,000 --> 00:03:37,000 But now it is a component that will actually ensure 74 00:03:37,000 --> 00:03:40,000 that we stay in that single-page application. 75 00:03:41,000 --> 00:03:44,000 So, with that link component being used here, 76 00:03:44,000 --> 00:03:46,000 if you now take a look at that refresh icon, 77 00:03:46,000 --> 00:03:50,000 as I click this link, you see it never changes to a cross. 78 00:03:50,000 --> 00:03:52,000 It always stays the same, 79 00:03:52,000 --> 00:03:55,000 which proves that we're not leaving the page, 80 00:03:55,000 --> 00:03:57,000 we're not loading a brand new page. 81 00:03:57,000 --> 00:03:59,000 Instead, behind the scenes, 82 00:03:59,000 --> 00:04:01,000 the content of the next page will still be rendered 83 00:04:01,000 --> 00:04:02,000 on the server, 84 00:04:02,000 --> 00:04:04,000 but it'll then be sent to the client, 85 00:04:04,000 --> 00:04:08,000 and there it'll be handled by client-side JavaScript code 86 00:04:08,000 --> 00:04:10,000 to update what we see on the screen.