1 00:00:01,000 --> 00:00:03,000 So let's have a look 2 00:00:03,000 --> 00:00:06,000 at the NextJS key features and benefits. 3 00:00:06,000 --> 00:00:10,000 And whilst we go through them, it will also become clearer, 4 00:00:10,000 --> 00:00:15,000 why I like to call NextJS a full stack framework as well. 5 00:00:15,000 --> 00:00:20,000 I would say the most important key feature NextJS adds, 6 00:00:21,000 --> 00:00:24,000 is the built-in server-side rendering support. 7 00:00:24,000 --> 00:00:26,000 Now in case it's not clear 8 00:00:26,000 --> 00:00:28,000 what server-side rendering means, 9 00:00:28,000 --> 00:00:32,000 server-side rendering is all about preparing the content 10 00:00:32,000 --> 00:00:37,000 of a page on the server instead of on the client. 11 00:00:37,000 --> 00:00:40,000 If you take a standard React application built 12 00:00:40,000 --> 00:00:45,000 with just React, then if you inspect the source code 13 00:00:45,000 --> 00:00:48,000 of a loaded React page, you will notice 14 00:00:48,000 --> 00:00:51,000 that the page is actually pretty empty 15 00:00:51,000 --> 00:00:52,000 right from the start. 16 00:00:52,000 --> 00:00:55,000 You only have a basic HTML skeleton there, 17 00:00:55,000 --> 00:00:58,000 and then some entry point, 18 00:00:58,000 --> 00:01:01,000 some div with an idea route typically, 19 00:01:01,000 --> 00:01:05,000 into which the React app is loaded and rendered. 20 00:01:05,000 --> 00:01:08,000 But all of that rendering, is done by React. 21 00:01:08,000 --> 00:01:12,000 And since React is a client side, JavaScript library, 22 00:01:12,000 --> 00:01:15,000 all that rendering happens on the client, 23 00:01:15,000 --> 00:01:18,000 so in the browsers of your users, 24 00:01:18,000 --> 00:01:20,000 it's not happening on the server. 25 00:01:20,000 --> 00:01:24,000 And as a result, the actual HTML code, 26 00:01:24,000 --> 00:01:27,000 which is sent from the server to the client, 27 00:01:27,000 --> 00:01:30,000 when a user visits your page is pretty empty. 28 00:01:31,000 --> 00:01:35,000 Now, that is not necessarily a big problem. 29 00:01:35,000 --> 00:01:38,000 It depends on what you're building, but it can be a problem. 30 00:01:38,000 --> 00:01:41,000 Because for example, if your page also, 31 00:01:41,000 --> 00:01:43,000 fetches some data from a server 32 00:01:43,000 --> 00:01:45,000 that should be displayed 33 00:01:45,000 --> 00:01:46,000 like a list of meetups, 34 00:01:46,000 --> 00:01:47,000 as we're doing it here, 35 00:01:47,000 --> 00:01:51,000 then the user might initially see some loading state, 36 00:01:51,000 --> 00:01:54,000 a flickering page for a fraction of a second, 37 00:01:54,000 --> 00:01:58,000 whilst the request is on its way, fetching the data 38 00:01:58,000 --> 00:02:00,000 because data fetching only begins 39 00:02:00,000 --> 00:02:04,000 once the JavaScript code executed on the client. 40 00:02:04,000 --> 00:02:06,000 And then we still have to wait 41 00:02:06,000 --> 00:02:08,000 for the response of that outgoing request. 42 00:02:09,000 --> 00:02:12,000 Simply because the page which we requested 43 00:02:12,000 --> 00:02:15,000 did not yet contain that data. 44 00:02:15,000 --> 00:02:18,000 Now, again, that is not necessarily a problem, 45 00:02:18,000 --> 00:02:21,000 but of course it might not be the user experience 46 00:02:21,000 --> 00:02:23,000 you want to offer. 47 00:02:23,000 --> 00:02:25,000 Now it can also be a problem 48 00:02:25,000 --> 00:02:29,000 if search engine optimization matters to you. 49 00:02:29,000 --> 00:02:32,000 Now, this does not matter for all pages. 50 00:02:32,000 --> 00:02:34,000 If you have a administration dashboard 51 00:02:34,000 --> 00:02:37,000 which is only reached by logging in, 52 00:02:37,000 --> 00:02:39,000 then search engine optimization 53 00:02:39,000 --> 00:02:40,000 does not matter there 54 00:02:40,000 --> 00:02:44,000 because search engines will never see that dashboard. 55 00:02:44,000 --> 00:02:46,000 It's highly user specific, 56 00:02:46,000 --> 00:02:48,000 and you need to log in any ways, 57 00:02:48,000 --> 00:02:51,000 but if you have a public facing page with a lot 58 00:02:51,000 --> 00:02:55,000 of content that should be found through search engines, 59 00:02:55,000 --> 00:02:58,000 then of course, search engine optimization does matter. 60 00:02:58,000 --> 00:03:02,000 So for example, here, where we got this list of meetups, 61 00:03:02,000 --> 00:03:04,000 we see those meetups as a user 62 00:03:04,000 --> 00:03:08,000 but the search engine crawlers will actually only see 63 00:03:08,000 --> 00:03:11,000 that initially empty HTML page 64 00:03:11,000 --> 00:03:13,000 which we're getting from a server. 65 00:03:13,000 --> 00:03:17,000 So, that content is not picked up by search engine crawlers 66 00:03:17,000 --> 00:03:20,000 and that can be a problem. 67 00:03:20,000 --> 00:03:23,000 And that's where a server-side rendering could help us. 68 00:03:23,000 --> 00:03:27,000 If that page would be pre-rendered on the server, 69 00:03:27,000 --> 00:03:31,000 if that data fetching somehow could be done on the server, 70 00:03:31,000 --> 00:03:33,000 when the request hits that server 71 00:03:33,000 --> 00:03:36,000 and then the finished page would be served 72 00:03:36,000 --> 00:03:39,000 to our users and to the search engine crawlers, 73 00:03:39,000 --> 00:03:43,000 then users would not have that flickering loading state 74 00:03:43,000 --> 00:03:47,000 and search engines would see our page content. 75 00:03:47,000 --> 00:03:49,000 And that's the problem server-side rendering solves. 76 00:03:49,000 --> 00:03:53,000 It allows us to pre-render React pages, 77 00:03:53,000 --> 00:03:56,000 React components on a server. 78 00:03:56,000 --> 00:04:00,000 Now ReactJS actually has built-in features 79 00:04:00,000 --> 00:04:03,000 that allow you to add server-side rendering 80 00:04:03,000 --> 00:04:05,000 but it can be tricky to get that right. 81 00:04:05,000 --> 00:04:08,000 And it requires extra setup from your side. 82 00:04:08,000 --> 00:04:12,000 With NextJS, that becomes way easier 83 00:04:12,000 --> 00:04:16,000 because NextJS has built-in server-side rendering. 84 00:04:16,000 --> 00:04:20,000 It automatically pre renders your pages 85 00:04:20,000 --> 00:04:22,000 and that means that with NextJS, 86 00:04:22,000 --> 00:04:25,000 if you build a standard NextJS app, 87 00:04:25,000 --> 00:04:28,000 without any extra setup from your side, 88 00:04:28,000 --> 00:04:30,000 if you visit such a page, 89 00:04:30,000 --> 00:04:34,000 it was pre-rendered on the server by default out of the box. 90 00:04:34,000 --> 00:04:37,000 And that means that it's great 91 00:04:37,000 --> 00:04:38,000 for a search engine optimization 92 00:04:38,000 --> 00:04:42,000 because search engines see what our users see 93 00:04:42,000 --> 00:04:46,000 and our users also have a better initial load experience 94 00:04:46,000 --> 00:04:49,000 because they don't have that initial flickering. 95 00:04:49,000 --> 00:04:53,000 If we inspect the source code of a NextJS page, 96 00:04:53,000 --> 00:04:55,000 it's half a page in the NextJS app, 97 00:04:55,000 --> 00:04:57,000 then we see that there, 98 00:04:57,000 --> 00:05:00,000 it's not just an empty HTML skeleton, 99 00:05:00,000 --> 00:05:04,000 but instead all the content is already there 100 00:05:04,000 --> 00:05:08,000 in that HTML page, which we got back from the server. 101 00:05:08,000 --> 00:05:11,000 Now it is worth noting that with NextJS, 102 00:05:11,000 --> 00:05:15,000 after this initial load offered as initial request, 103 00:05:15,000 --> 00:05:19,000 we still get a standard React app running in the browser, 104 00:05:19,000 --> 00:05:22,000 a standard single page application even, 105 00:05:22,000 --> 00:05:25,000 subsequent navigation actions by the user. 106 00:05:25,000 --> 00:05:29,000 So when the user then browses our page and navigates 107 00:05:29,000 --> 00:05:32,000 around, those actions are all handled by React 108 00:05:32,000 --> 00:05:37,000 in the browser to have this fast interactive user experience 109 00:05:37,000 --> 00:05:40,000 which we typically wanna offer with React, 110 00:05:40,000 --> 00:05:41,000 which was one of the reasons 111 00:05:41,000 --> 00:05:43,000 why you would use React typically. 112 00:05:43,000 --> 00:05:46,000 So we still get that but for the initial load, 113 00:05:46,000 --> 00:05:49,000 we have that pre-rendered page. 114 00:05:49,000 --> 00:05:51,000 And that in the end, means that, 115 00:05:51,000 --> 00:05:53,000 client site and server-side code is kind 116 00:05:53,000 --> 00:05:57,000 of blended together with NextJS. 117 00:05:57,000 --> 00:05:59,000 And of course in this course, 118 00:05:59,000 --> 00:06:02,000 you are going to learn how things are blending together, 119 00:06:02,000 --> 00:06:05,000 how you can write code that runs on a server 120 00:06:05,000 --> 00:06:08,000 and how you can write code that runs on the client. 121 00:06:08,000 --> 00:06:11,000 You are of course, going to learn all about that. 122 00:06:11,000 --> 00:06:14,000 And this is therefore, of the major features 123 00:06:14,000 --> 00:06:16,000 that makes up NextJS. 124 00:06:16,000 --> 00:06:19,000 This built-in server-side rendering, 125 00:06:19,000 --> 00:06:24,000 which on its own probably would already be a strong benefit 126 00:06:24,000 --> 00:06:28,000 or a strong reason for why you might want to use NextJS 127 00:06:28,000 --> 00:06:33,000 for building your React projects instead of just ReactJS. 128 00:06:33,000 --> 00:06:36,000 But it's not the only key feature.