1 00:00:02,130 --> 00:00:09,390 Let's start with nextjs, you can simply google for nextjs and then pick the github repository 2 00:00:09,390 --> 00:00:14,990 link you find. On this page you'll find detailed instructions on how to use it, 3 00:00:15,180 --> 00:00:20,190 a link leading to another page where you can dive even deeper into it and also instructions how to 4 00:00:20,190 --> 00:00:21,120 install it. 5 00:00:21,240 --> 00:00:22,740 But what is nextjs? 6 00:00:22,740 --> 00:00:30,240 Here it's saying nextjs is a minimalistic framework for a server rendered react applications. 7 00:00:30,240 --> 00:00:34,890 Now server side rendering is quite an advanced react concept, 8 00:00:34,890 --> 00:00:38,320 there are therefore courses focusing entirely on that. 9 00:00:38,640 --> 00:00:45,450 In a nutshell, server side rendering simply means that when a user enters a URL leading to your react 10 00:00:45,450 --> 00:00:52,620 app or one of your pages of your react app, it will pre-render that page on the server so that the 11 00:00:52,620 --> 00:00:57,330 server returns that pre-rendered html code, 12 00:00:57,330 --> 00:00:58,840 let me show you what I mean. 13 00:00:58,890 --> 00:01:00,730 If we have a look at our normal setup, 14 00:01:00,750 --> 00:01:02,520 we have a server and a client 15 00:01:02,640 --> 00:01:08,760 and of course our react app code and with that, I mean both the build code in this build folder we had 16 00:01:08,790 --> 00:01:16,330 in that create react app application and also the raw code in your source folder. 17 00:01:16,410 --> 00:01:22,430 If you now visit your server for the first time, so you load the page for the first time, the server would 18 00:01:22,440 --> 00:01:28,980 typically ship you the index.html file and your code and then you would load it as a single page application 19 00:01:28,980 --> 00:01:30,620 in your client. 20 00:01:30,630 --> 00:01:39,390 The problem can be that if your page needs to be crawlable by search engines, crawlers like the google 21 00:01:39,420 --> 00:01:46,320 crawler might not really understand or read your page correctly, especially if you are using asynchronous 22 00:01:46,320 --> 00:01:48,990 code to load the initial content. 23 00:01:49,230 --> 00:01:54,780 So if you have a page where the first thing you do in javascript is you reach out to a server and then 24 00:01:54,780 --> 00:01:57,560 render the results to the screen when the data is back, 25 00:01:57,780 --> 00:02:04,650 that might happen super fast to the user but the crawler will only see the spinner or whatever you are 26 00:02:04,650 --> 00:02:07,520 showing until the data is there. 27 00:02:07,680 --> 00:02:13,360 Now with server side rendering, for the first page load which is always what the crawler sees, 28 00:02:13,530 --> 00:02:19,200 the server will fetch and render the react app so it won't just fetch and return it, 29 00:02:19,200 --> 00:02:26,820 it also renders it for that page you visited and then it returns that pre-rendered page along with the 30 00:02:26,820 --> 00:02:32,420 react app bundle so that from this point on, you still have a single page application 31 00:02:32,430 --> 00:02:34,580 so you then still work as before. 32 00:02:34,650 --> 00:02:41,940 It's just about that initial page load essentially, now nextjs is a package helping you with server 33 00:02:41,940 --> 00:02:44,860 side rendering because that is super tricky to set up. 34 00:02:44,970 --> 00:02:51,380 And besides just helping you with it, it gives you a custom or a specific structure to work in. 35 00:02:51,390 --> 00:02:58,570 This structure takes advantage of enforcing a strict folder structure you have to use 36 00:02:58,680 --> 00:03:05,700 though we're only talking about one folder mainly which has to be named in a certain way, so that all 37 00:03:05,700 --> 00:03:10,170 the routes of your application are actually generated automatically. 38 00:03:10,350 --> 00:03:16,560 Let me show you what I mean and how we start such a nextjs project over the nextjs lectures.