1 00:00:00,000 --> 00:00:01,000 Now that's something 2 00:00:01,000 --> 00:00:04,000 that's super important in NextJS. 3 00:00:04,000 --> 00:00:07,000 NextJS knows Server components, 4 00:00:07,000 --> 00:00:11,000 React Server components and Client Components. 5 00:00:11,000 --> 00:00:16,000 And actually that's technically not just NextJS, 6 00:00:16,000 --> 00:00:20,000 instead, React itself has this differentiation 7 00:00:20,000 --> 00:00:22,000 though in most React apps, 8 00:00:22,000 --> 00:00:24,000 in all those vanilla React apps 9 00:00:24,000 --> 00:00:27,000 which you are building with help of create React app 10 00:00:27,000 --> 00:00:28,000 or with help of Vite, 11 00:00:28,000 --> 00:00:32,000 you are using client components out of the box. 12 00:00:32,000 --> 00:00:34,000 Because in those projects, 13 00:00:34,000 --> 00:00:37,000 React.js is a pure client side library, 14 00:00:37,000 --> 00:00:41,000 running code in the browser on the client. 15 00:00:41,000 --> 00:00:43,000 With NextJS, that changes 16 00:00:43,000 --> 00:00:46,000 because NextJS is a full stack framework. 17 00:00:46,000 --> 00:00:50,000 It has a backend, not just a front end, 18 00:00:50,000 --> 00:00:52,000 and therefore code also executes 19 00:00:52,000 --> 00:00:55,000 on that backend when working with NextJS. 20 00:00:55,000 --> 00:00:59,000 And for example, by default, all those React components 21 00:00:59,000 --> 00:01:01,000 you have in your NextJS project, 22 00:01:01,000 --> 00:01:05,000 no matter if they're pages, layouts or standard components 23 00:01:05,000 --> 00:01:08,000 are only rendered on the Server. 24 00:01:08,000 --> 00:01:11,000 That's why they're called React Server components. 25 00:01:13,000 --> 00:01:15,000 Now as mentioned, that's actually technically 26 00:01:15,000 --> 00:01:17,000 a feature built into React, 27 00:01:17,000 --> 00:01:20,000 but it must be unlocked, you could say, 28 00:01:20,000 --> 00:01:22,000 with a certain behind the scenes 29 00:01:22,000 --> 00:01:24,000 build process and structure, 30 00:01:24,000 --> 00:01:27,000 that's not part of most React projects. 31 00:01:27,000 --> 00:01:30,000 But it is unlocked and it is the standard 32 00:01:30,000 --> 00:01:33,000 in NextJS projects. 33 00:01:33,000 --> 00:01:36,000 Therefore, thereby default, all React components 34 00:01:36,000 --> 00:01:39,000 are such React Server components 35 00:01:39,000 --> 00:01:42,000 and are only rendered on the Server. 36 00:01:42,000 --> 00:01:46,000 So that means that this component and this layout component, 37 00:01:46,000 --> 00:01:49,000 but also the slideshow component at the header component, 38 00:01:49,000 --> 00:01:53,000 all those components do not execute in the browser. 39 00:01:53,000 --> 00:01:55,000 Those component functions don't execute there, 40 00:01:55,000 --> 00:01:57,000 but instead on the Server. 41 00:01:57,000 --> 00:01:59,000 And you can see that that's the case 42 00:01:59,000 --> 00:02:02,000 if you console log executing. 43 00:02:03,000 --> 00:02:05,000 Here in this main header component, for example. 44 00:02:07,000 --> 00:02:10,000 If you do that, and you then go to the page.js file 45 00:02:10,000 --> 00:02:12,000 and you temporarily comment out 46 00:02:12,000 --> 00:02:16,000 the image slideshow component since it's causing an error, 47 00:02:16,000 --> 00:02:17,000 which we'll fix soon, 48 00:02:17,000 --> 00:02:19,000 and you also comment out that import, 49 00:02:20,000 --> 00:02:24,000 you'll see that if you save everything and you reload, 50 00:02:24,000 --> 00:02:27,000 if you open your browser developer tools, 51 00:02:27,000 --> 00:02:31,000 you will not see that executing log here. 52 00:02:31,000 --> 00:02:33,000 So that executing log, 53 00:02:33,000 --> 00:02:35,000 which we are logging in the main header, 54 00:02:35,000 --> 00:02:37,000 it's not showing up here, 55 00:02:37,000 --> 00:02:39,000 because the main header component function 56 00:02:39,000 --> 00:02:41,000 never executes in the browser, 57 00:02:43,000 --> 00:02:46,000 instead, it executes on the Server. 58 00:02:46,000 --> 00:02:48,000 And therefore if you open that terminal 59 00:02:48,000 --> 00:02:51,000 where you start the development Server, 60 00:02:51,000 --> 00:02:54,000 which is running that Server side code, therefore, 61 00:02:54,000 --> 00:02:57,000 you see those executing logs. 62 00:02:58,000 --> 00:03:01,000 So, it's there where those components execute. 63 00:03:02,000 --> 00:03:06,000 And what's interesting, is that this is not just the case 64 00:03:06,000 --> 00:03:08,000 for the initial page load, 65 00:03:08,000 --> 00:03:11,000 but also for subsequent navigations. 66 00:03:11,000 --> 00:03:15,000 So if I, for example, also log something on that meals page, 67 00:03:15,000 --> 00:03:18,000 if I console log meals page here, 68 00:03:19,000 --> 00:03:22,000 and I then reload the starting page 69 00:03:22,000 --> 00:03:26,000 and I click on explore meals to be taken to that meals page, 70 00:03:26,000 --> 00:03:28,000 I don't see that log here either, 71 00:03:28,000 --> 00:03:30,000 even though I used that link 72 00:03:30,000 --> 00:03:35,000 and we therefore stayed in that single page application, 73 00:03:35,000 --> 00:03:38,000 we did not fetch a brand new page. 74 00:03:38,000 --> 00:03:42,000 But even though that's the case, I don't see the log here, 75 00:03:42,000 --> 00:03:45,000 instead I see it here in that backend log. 76 00:03:46,000 --> 00:03:48,000 And that's happening, because even if you are 77 00:03:48,000 --> 00:03:50,000 in that single page application mode 78 00:03:50,000 --> 00:03:52,000 and you're navigating around, 79 00:03:52,000 --> 00:03:55,000 all the components will still be rendered on the Server 80 00:03:55,000 --> 00:03:57,000 on the backend, and in the end 81 00:03:57,000 --> 00:04:00,000 it's kind of the finished HTML code 82 00:04:00,000 --> 00:04:03,000 that's then sent to the client to be rendered there. 83 00:04:03,000 --> 00:04:05,000 It's technically a bit different, 84 00:04:05,000 --> 00:04:07,000 but that is how you can think about it. 85 00:04:07,000 --> 00:04:10,000 And therefore NextJS embraces this concept 86 00:04:10,000 --> 00:04:13,000 of having those Server components. 87 00:04:13,000 --> 00:04:15,000 Now that's an important concept 88 00:04:15,000 --> 00:04:20,000 and an important advantage of NextJS projects, 89 00:04:20,000 --> 00:04:22,000 because with Server components 90 00:04:22,000 --> 00:04:26,000 you have potentially less client side JavaScript code 91 00:04:26,000 --> 00:04:28,000 that must be downloaded, 92 00:04:28,000 --> 00:04:32,000 hence possibly improving the performance of your website. 93 00:04:32,000 --> 00:04:36,000 And it's also great for search engine optimization, 94 00:04:36,000 --> 00:04:40,000 because web search crawlers now see pages 95 00:04:40,000 --> 00:04:44,000 that contain the complete finished content. 96 00:04:44,000 --> 00:04:47,000 Compare that with a Vanilla JavaScript project 97 00:04:47,000 --> 00:04:50,000 where you are not using a framework like NextJS. 98 00:04:50,000 --> 00:04:54,000 There, if you take a look at the source code of a page, 99 00:04:54,000 --> 00:04:57,000 you'll see that it's essentially an empty page 100 00:04:57,000 --> 00:04:59,000 because all the content is created 101 00:04:59,000 --> 00:05:03,000 and populated on the client side by client side code 102 00:05:03,000 --> 00:05:06,000 with help of those client side components. 103 00:05:06,000 --> 00:05:08,000 In NextJS, project stats different. 104 00:05:08,000 --> 00:05:11,000 If you take a look at the source code there, 105 00:05:11,000 --> 00:05:14,000 you will see that all the content is in there. 106 00:05:14,000 --> 00:05:17,000 All that text that's visible on the screen 107 00:05:17,000 --> 00:05:20,000 is part of the actual page source code, 108 00:05:20,000 --> 00:05:24,000 and that is also what web search engine crawlers will see. 109 00:05:24,000 --> 00:05:27,000 So that's why we have this concept of Server components 110 00:05:27,000 --> 00:05:29,000 and why it's an important concept. 111 00:05:30,000 --> 00:05:33,000 Nonetheless, in NextJS projects, 112 00:05:33,000 --> 00:05:36,000 you can still also build client components, 113 00:05:36,000 --> 00:05:38,000 and that would be components 114 00:05:38,000 --> 00:05:42,000 that are still technically pre-rendered on the server, 115 00:05:42,000 --> 00:05:46,000 but then also potentially rendered on the client. 116 00:05:46,000 --> 00:05:49,000 And most importantly, these are components 117 00:05:49,000 --> 00:05:51,000 that must be rendered on the client 118 00:05:51,000 --> 00:05:53,000 because they contain some code 119 00:05:53,000 --> 00:05:58,000 or use some features that are only available on the client. 120 00:05:59,000 --> 00:06:04,000 Like for example here in this image slideshow JS file, 121 00:06:04,000 --> 00:06:07,000 they use state hook, or the use fact hook. 122 00:06:08,000 --> 00:06:12,000 These hooks are not available on the Server side, 123 00:06:12,000 --> 00:06:15,000 which kind of makes sense if you think about it 124 00:06:15,000 --> 00:06:19,000 because we're not interested in setting this interval 125 00:06:19,000 --> 00:06:22,000 on the Server side, we wanna run this in the browser 126 00:06:22,000 --> 00:06:25,000 so that the image swaps every five seconds 127 00:06:25,000 --> 00:06:27,000 after the page has been loaded. 128 00:06:28,000 --> 00:06:30,000 Another example for a feature 129 00:06:30,000 --> 00:06:33,000 that would only be available in client components 130 00:06:33,000 --> 00:06:35,000 would be event handlers. 131 00:06:35,000 --> 00:06:37,000 So if you would use the on click prop 132 00:06:37,000 --> 00:06:39,000 to trigger some function, 133 00:06:39,000 --> 00:06:41,000 obviously since you are waiting 134 00:06:41,000 --> 00:06:43,000 for some user interaction here, 135 00:06:43,000 --> 00:06:46,000 that would require to be a client component 136 00:06:46,000 --> 00:06:49,000 because that would require code that runs on the client. 137 00:06:49,000 --> 00:06:52,000 But since by default in NextJS, 138 00:06:52,000 --> 00:06:55,000 all components are Server components. 139 00:06:55,000 --> 00:06:58,000 You have to explicitly tell NextJS 140 00:06:58,000 --> 00:07:00,000 if you wanna build a client component 141 00:07:00,000 --> 00:07:04,000 by using a special directive at the top of the file 142 00:07:04,000 --> 00:07:06,000 that holds that component. 143 00:07:06,000 --> 00:07:10,000 To be precise, you have to add the use client directive, 144 00:07:10,000 --> 00:07:14,000 and that then allows you to use client site features 145 00:07:14,000 --> 00:07:16,000 in your component. 146 00:07:16,000 --> 00:07:20,000 Like event handlers or use effect and use state. 147 00:07:20,000 --> 00:07:21,000 So therefore here, 148 00:07:21,000 --> 00:07:25,000 in order to make this slideshow component work, 149 00:07:25,000 --> 00:07:28,000 we have to add this use client directive 150 00:07:28,000 --> 00:07:30,000 at the top of this file. 151 00:07:32,000 --> 00:07:36,000 And with that added, we can go back to that main page 152 00:07:36,000 --> 00:07:38,000 and bring back that import 153 00:07:38,000 --> 00:07:40,000 and bring back that component here. 154 00:07:42,000 --> 00:07:45,000 And now you will see that if you reload, this works, 155 00:07:45,000 --> 00:07:47,000 we no longer get an error 156 00:07:47,000 --> 00:07:49,000 and we now have that image here 157 00:07:49,000 --> 00:07:52,000 which changes every five seconds. 158 00:07:52,000 --> 00:07:55,000 And that's now the behavior I want here, 159 00:07:55,000 --> 00:07:58,000 now unlocked with help of client components. 160 00:07:58,000 --> 00:08:01,000 And it's super important to know about this difference 161 00:08:01,000 --> 00:08:05,000 and to understand that these two component types 162 00:08:05,000 --> 00:08:09,000 exist in general in React, but really only work 163 00:08:09,000 --> 00:08:13,000 and can be used when using a framework like NextJS.