1 00:00:00,000 --> 00:00:03,000 In the last lectures, 2 00:00:03,000 --> 00:00:07,000 we again saw a client component in action 3 00:00:07,000 --> 00:00:12,000 and we did already explore server and client components 4 00:00:12,000 --> 00:00:17,000 earlier in this course in the essentials course section. 5 00:00:17,000 --> 00:00:20,000 But it is important to understand 6 00:00:20,000 --> 00:00:22,000 these different component types, 7 00:00:22,000 --> 00:00:26,000 why they exist, how they work, and when to use which. 8 00:00:27,000 --> 00:00:31,000 Because in NextJS applications we have 9 00:00:31,000 --> 00:00:34,000 React Server Components which are components 10 00:00:34,000 --> 00:00:38,000 that are only rendered on the server. 11 00:00:38,000 --> 00:00:41,000 So where the entire component function 12 00:00:41,000 --> 00:00:46,000 is only executed on the server, never on the client. 13 00:00:46,000 --> 00:00:49,000 We have these kinds of components 14 00:00:49,000 --> 00:00:54,000 and then we have client components which are also 15 00:00:54,000 --> 00:00:59,000 initially pre-rendered on the server despite their name, 16 00:00:59,000 --> 00:01:03,000 but which then also can be executed on the client side, 17 00:01:03,000 --> 00:01:07,000 so in the browser, unlike Server components 18 00:01:08,000 --> 00:01:11,000 and the error JS file, 19 00:01:11,000 --> 00:01:14,000 the component defined in there must be 20 00:01:14,000 --> 00:01:16,000 a client component for example. 21 00:01:16,000 --> 00:01:18,000 And that's simply the case 22 00:01:18,000 --> 00:01:21,000 because in a NextJS application, 23 00:01:21,000 --> 00:01:26,000 errors cannot just be caused due to problems on the server, 24 00:01:26,000 --> 00:01:31,000 but also potentially because some client side code fails 25 00:01:31,000 --> 00:01:36,000 and therefore this error fallback component must be callable 26 00:01:36,000 --> 00:01:37,000 on the client side. 27 00:01:37,000 --> 00:01:41,000 That's why we have a client component here. 28 00:01:41,000 --> 00:01:44,000 But all the other components we have in this application 29 00:01:44,000 --> 00:01:47,000 thus far, all the other page components, 30 00:01:47,000 --> 00:01:50,000 and also our own non-page components, 31 00:01:50,000 --> 00:01:54,000 all these components are server components. 32 00:01:54,000 --> 00:01:59,000 They're only rendered on the server, never on the client. 33 00:02:00,000 --> 00:02:04,000 And you can see that if you console log something in there, 34 00:02:04,000 --> 00:02:06,000 for example, news list. 35 00:02:07,000 --> 00:02:11,000 If you do that, you'll notice 36 00:02:11,000 --> 00:02:14,000 that if you open your browser developer tools 37 00:02:14,000 --> 00:02:16,000 and they are the JavaScript console, 38 00:02:16,000 --> 00:02:18,000 you won't see any log in there 39 00:02:18,000 --> 00:02:21,000 no matter how much I navigate around. 40 00:02:21,000 --> 00:02:23,000 So even though we're in that single page 41 00:02:23,000 --> 00:02:28,000 application mode here, we don't see any news list log here. 42 00:02:28,000 --> 00:02:31,000 On the other hand, if I opened a terminal 43 00:02:31,000 --> 00:02:34,000 where the development server is running, 44 00:02:34,000 --> 00:02:38,000 if I reload this news page for example, 45 00:02:38,000 --> 00:02:41,000 I can see this news list log here, 46 00:02:41,000 --> 00:02:44,000 which proves that it was executed on the server 47 00:02:44,000 --> 00:02:47,000 because any logs we're seeing here in that terminal 48 00:02:47,000 --> 00:02:50,000 where the development server are running 49 00:02:50,000 --> 00:02:55,000 are server side logs logs, so produced by server side code. 50 00:02:56,000 --> 00:03:01,000 Now by default in NextJS you should keep all your components 51 00:03:02,000 --> 00:03:04,000 as server components. 52 00:03:04,000 --> 00:03:07,000 You should not change them to client components 53 00:03:07,000 --> 00:03:10,000 if you don't have to because there's just no reason 54 00:03:10,000 --> 00:03:15,000 to unnecessarily potentially execute some code 55 00:03:15,000 --> 00:03:18,000 on the client if it's not required to load there. 56 00:03:18,000 --> 00:03:23,000 Rendering everything on the server is the better strategy. 57 00:03:23,000 --> 00:03:26,000 But sometimes you need a client component, for example here 58 00:03:26,000 --> 00:03:28,000 for the error page, 59 00:03:28,000 --> 00:03:32,000 but also for another adjustment I wanna make here 60 00:03:32,000 --> 00:03:34,000 that other adjustment I wanna make 61 00:03:34,000 --> 00:03:36,000 is here in my main header. 62 00:03:36,000 --> 00:03:38,000 There, I wanna add a second link 63 00:03:38,000 --> 00:03:42,000 which leads us to the archive. 64 00:03:42,000 --> 00:03:46,000 And for that alone, we don't need a client component. 65 00:03:46,000 --> 00:03:48,000 We can just make it like this 66 00:03:48,000 --> 00:03:51,000 and keep the main header as a server component. 67 00:03:53,000 --> 00:03:55,000 And with that we now have that archive link. 68 00:03:55,000 --> 00:04:00,000 But now I wanna highlight the currently active link, 69 00:04:00,000 --> 00:04:01,000 so not just when we hover over it, 70 00:04:01,000 --> 00:04:05,000 but instead when the related page is active. 71 00:04:06,000 --> 00:04:08,000 And to do that I need to find out 72 00:04:08,000 --> 00:04:11,000 what the currently active path is 73 00:04:11,000 --> 00:04:15,000 and we can get that currently active path 74 00:04:15,000 --> 00:04:18,000 by using the use path name hook, 75 00:04:18,000 --> 00:04:22,000 which can be imported from next slash navigation. 76 00:04:23,000 --> 00:04:27,000 This gives us a path value, which will be a string, 77 00:04:27,000 --> 00:04:30,000 which is simply the currently active URL path. 78 00:04:31,000 --> 00:04:34,000 We can then use that to find out which link 79 00:04:34,000 --> 00:04:36,000 should be marked as active. 80 00:04:36,000 --> 00:04:39,000 So we can do that by adding a class name here 81 00:04:39,000 --> 00:04:44,000 and checking if the path which we got from use path name 82 00:04:45,000 --> 00:04:50,000 is equal to slash news in this case, 83 00:04:51,000 --> 00:04:56,000 or let's say whether it starts with slash news 84 00:04:56,000 --> 00:05:01,000 so that nested pops also mark this link as active. 85 00:05:03,000 --> 00:05:04,000 And if that's the case, 86 00:05:04,000 --> 00:05:07,000 I wanna add a CSS class called active to this link. 87 00:05:07,000 --> 00:05:11,000 Otherwise, I'll add undefined as a class, 88 00:05:11,000 --> 00:05:12,000 so no class. 89 00:05:14,000 --> 00:05:17,000 And then we can repeat that on the second link 90 00:05:17,000 --> 00:05:22,000 and just check whether the path starts with slash archive. 91 00:05:23,000 --> 00:05:25,000 So with that we have the logic 92 00:05:25,000 --> 00:05:27,000 for potentially highlighting the links, 93 00:05:27,000 --> 00:05:31,000 but we now would get an error if we save that. 94 00:05:31,000 --> 00:05:34,000 We get an error because use path name only works 95 00:05:34,000 --> 00:05:38,000 in client components and we also get the solution here 96 00:05:38,000 --> 00:05:41,000 that we should add the use client directive 97 00:05:41,000 --> 00:05:42,000 at the top of the file. 98 00:05:43,000 --> 00:05:46,000 Well therefore here, we actually now have 99 00:05:46,000 --> 00:05:51,000 to convert this component here to a client component 100 00:05:51,000 --> 00:05:53,000 because otherwise it won't work. 101 00:05:54,000 --> 00:05:59,000 Because this hook here like most needs a client component 102 00:05:59,000 --> 00:06:02,000 around it in order to work. 103 00:06:02,000 --> 00:06:06,000 So therefore here we should add this use client directive 104 00:06:06,000 --> 00:06:09,000 at the top of the main header JS file 105 00:06:09,000 --> 00:06:12,000 and with that added, if you save everything, 106 00:06:12,000 --> 00:06:17,000 the error goes away and the active path is highlighted 107 00:06:17,000 --> 00:06:18,000 and stays highlighted. 108 00:06:19,000 --> 00:06:23,000 However, this solution has a small flaw 109 00:06:23,000 --> 00:06:25,000 because whilst it works, 110 00:06:25,000 --> 00:06:29,000 we now actually also converted a lot of markup 111 00:06:29,000 --> 00:06:32,000 to client component markup, 112 00:06:32,000 --> 00:06:35,000 even though it wouldn't need to be. 113 00:06:35,000 --> 00:06:38,000 Because we really only need use client 114 00:06:38,000 --> 00:06:40,000 because of use path name. 115 00:06:40,000 --> 00:06:42,000 And we only need that 116 00:06:42,000 --> 00:06:46,000 because of the link component where we wanna add 117 00:06:46,000 --> 00:06:48,000 a CSS class conditionally. 118 00:06:49,000 --> 00:06:52,000 And therefore in such scenarios 119 00:06:52,000 --> 00:06:55,000 and in general when working with NextJS, 120 00:06:55,000 --> 00:07:00,000 it is considered a good practice to outsource 121 00:07:00,000 --> 00:07:02,000 that client site code 122 00:07:02,000 --> 00:07:06,000 or that code that requires a client component 123 00:07:06,000 --> 00:07:11,000 so that your client components are as small as possible 124 00:07:11,000 --> 00:07:14,000 so that most of your component logic 125 00:07:14,000 --> 00:07:18,000 and markup stays in the server component realm. 126 00:07:19,000 --> 00:07:22,000 Hence here I'll add a new component, 127 00:07:22,000 --> 00:07:26,000 the nav link JS file will hold it 128 00:07:26,000 --> 00:07:30,000 where I'll export my component function nav link. 129 00:07:32,000 --> 00:07:36,000 And this component now has the job of outputting 130 00:07:36,000 --> 00:07:39,000 that potentially highlighted navigation link. 131 00:07:40,000 --> 00:07:44,000 So I'll actually cut this link component logic here 132 00:07:44,000 --> 00:07:46,000 from the main header JS file 133 00:07:46,000 --> 00:07:51,000 and add it here as a returned JSX code in nav link. 134 00:07:52,000 --> 00:07:57,000 And of course, we now also must copy this link component 135 00:07:57,000 --> 00:07:59,000 import from the main header JS file 136 00:07:59,000 --> 00:08:03,000 to the nav link JS file like this. 137 00:08:03,000 --> 00:08:08,000 And also cut this use path name usage here 138 00:08:08,000 --> 00:08:10,000 and move that into the nav link component 139 00:08:10,000 --> 00:08:13,000 because that's the reason why we created a separate 140 00:08:13,000 --> 00:08:14,000 component to begin with. 141 00:08:16,000 --> 00:08:18,000 Because now we can and should also get rid 142 00:08:18,000 --> 00:08:21,000 of that used path name import in main header 143 00:08:21,000 --> 00:08:24,000 and get rid of the used client directive there. 144 00:08:25,000 --> 00:08:28,000 And instead in the nav link component file, 145 00:08:28,000 --> 00:08:31,000 we now add this use path name import 146 00:08:31,000 --> 00:08:34,000 and the use client directive again. 147 00:08:34,000 --> 00:08:38,000 But now it's a much smaller component with much less markup 148 00:08:38,000 --> 00:08:41,000 that's marked as a client component. 149 00:08:43,000 --> 00:08:46,000 Now of course this should now be configurable 150 00:08:46,000 --> 00:08:49,000 and I expect to get a ref prop and the children prop, 151 00:08:49,000 --> 00:08:50,000 let's say. 152 00:08:50,000 --> 00:08:54,000 So that ref is actually set to whatever value is 153 00:08:54,000 --> 00:08:57,000 received through that ref prop. 154 00:08:57,000 --> 00:09:01,000 And the text between the link text is the content received 155 00:09:01,000 --> 00:09:02,000 through the children prop. 156 00:09:03,000 --> 00:09:06,000 And with that in the main header JS file, 157 00:09:06,000 --> 00:09:10,000 we can and should now use this nav link component 158 00:09:10,000 --> 00:09:14,000 and set ref to news here 159 00:09:14,000 --> 00:09:18,000 and the text to news and down here. 160 00:09:18,000 --> 00:09:23,000 Also use the nav link component and set ref to archive 161 00:09:24,000 --> 00:09:25,000 and the text to archive. 162 00:09:27,000 --> 00:09:30,000 And with that nav link is a client component, 163 00:09:30,000 --> 00:09:33,000 but main header is a server component. 164 00:09:34,000 --> 00:09:36,000 Now to finish nav link, 165 00:09:36,000 --> 00:09:38,000 we also must tweak this logic here now 166 00:09:38,000 --> 00:09:43,000 and actually replace this hard-coded starts with value, 167 00:09:43,000 --> 00:09:47,000 with the ref value we received. 168 00:09:47,000 --> 00:09:48,000 Like this. 169 00:09:49,000 --> 00:09:51,000 And that's the offer. 170 00:09:51,000 --> 00:09:53,000 A pretty common pattern you should be aware of 171 00:09:53,000 --> 00:09:56,000 when building NextJS components. 172 00:09:56,000 --> 00:09:59,000 If you must build a client component, 173 00:09:59,000 --> 00:10:02,000 try to make it as small as possible 174 00:10:02,000 --> 00:10:06,000 because with that, the application still works as before 175 00:10:06,000 --> 00:10:08,000 but now we improved our code.