1 00:00:01,240 --> 00:00:02,660 ‫And before starting, 2 00:00:02,660 --> 00:00:05,610 ‫let's just do a quick recap of server-side 3 00:00:05,610 --> 00:00:07,440 ‫and client-side rendering. 4 00:00:07,440 --> 00:00:09,860 ‫And also, I wanna show you in this video 5 00:00:09,860 --> 00:00:12,850 ‫the server-side rendered website that we're gonna build 6 00:00:12,850 --> 00:00:14,393 ‫over the next couple of hours. 7 00:00:15,670 --> 00:00:18,680 ‫So, remember how in client-side rendering, 8 00:00:18,680 --> 00:00:20,600 ‫the actual building of the website 9 00:00:20,600 --> 00:00:22,720 ‫happens on the client side. 10 00:00:22,720 --> 00:00:25,330 ‫And for that, we need a data source, 11 00:00:25,330 --> 00:00:27,722 ‫which is usually an API that sends data 12 00:00:27,722 --> 00:00:30,590 ‫to the client as requested. 13 00:00:30,590 --> 00:00:32,600 ‫So, that is what we've been building up 14 00:00:32,600 --> 00:00:34,490 ‫until this point in the course. 15 00:00:34,490 --> 00:00:36,750 ‫But now that you've mastered that part, 16 00:00:36,750 --> 00:00:39,900 ‫it's time to move on to server-side rendering 17 00:00:39,900 --> 00:00:43,030 ‫and actually build the website on the server. 18 00:00:43,030 --> 00:00:45,780 ‫And the main aspect of server-side rendering 19 00:00:45,780 --> 00:00:47,930 ‫is building the actual HTML, 20 00:00:47,930 --> 00:00:52,140 ‫basically because that's where all our data will be stored. 21 00:00:52,140 --> 00:00:54,480 ‫And for doing that, we use templates, 22 00:00:54,480 --> 00:00:56,090 ‫which have placeholders 23 00:00:56,090 --> 00:00:59,960 ‫where we will then inject our data as necessary. 24 00:00:59,960 --> 00:01:02,200 ‫So, whenever there is a request, 25 00:01:02,200 --> 00:01:04,170 ‫let's say for the homepage, 26 00:01:04,170 --> 00:01:07,172 ‫we then get the necessary data from the database, 27 00:01:07,172 --> 00:01:09,280 ‫inject it into a template, 28 00:01:09,280 --> 00:01:11,410 ‫which will then output HTML, 29 00:01:11,410 --> 00:01:13,610 ‫and finally send that HTML, 30 00:01:13,610 --> 00:01:15,890 ‫along with CSS and JavaScript 31 00:01:15,890 --> 00:01:18,990 ‫and image files, back to the client. 32 00:01:18,990 --> 00:01:21,320 ‫Pretty straightforward, right? 33 00:01:21,320 --> 00:01:24,290 ‫Now, we can still then use the API 34 00:01:24,290 --> 00:01:26,640 ‫for some of the things on the front end, 35 00:01:26,640 --> 00:01:29,840 ‫and actually, we're also gonna be doing that. 36 00:01:29,840 --> 00:01:32,600 ‫Okay, anyway, let me now show you 37 00:01:32,600 --> 00:01:35,150 ‫what we're actually going to build in this section. 38 00:01:36,690 --> 00:01:39,900 ‫So, this is the final rendered Natours website, 39 00:01:39,900 --> 00:01:44,000 ‫and it's actually live at www.natours.dev, 40 00:01:44,000 --> 00:01:45,360 ‫and so if you feel like it, 41 00:01:45,360 --> 00:01:46,193 ‫just go ahead 42 00:01:46,193 --> 00:01:48,150 ‫and open this page in your browser now, 43 00:01:48,150 --> 00:01:49,500 ‫and take a look. 44 00:01:49,500 --> 00:01:52,360 ‫You will have to specify this W-W-W, okay? 45 00:01:52,360 --> 00:01:54,320 ‫Otherwise, it's not going to work. 46 00:01:54,320 --> 00:01:56,760 ‫Anyway, here you see all of the tours 47 00:01:56,760 --> 00:01:58,060 ‫that we've been working with 48 00:01:58,060 --> 00:02:00,020 ‫as we were building our API, 49 00:02:00,020 --> 00:02:02,940 ‫and all the data here really is the exact same. 50 00:02:02,940 --> 00:02:06,133 ‫So, all of our nine tours are here, 51 00:02:07,010 --> 00:02:07,920 ‫right, 52 00:02:07,920 --> 00:02:09,800 ‫and so again, this is exactly 53 00:02:09,800 --> 00:02:12,700 ‫what we're gonna be building in this section. 54 00:02:12,700 --> 00:02:16,000 ‫Let's take a look at one of the detail pages here. 55 00:02:16,000 --> 00:02:18,100 ‫So, the Park Camper, 56 00:02:18,100 --> 00:02:21,170 ‫and so indeed, you have the average rating. 57 00:02:21,170 --> 00:02:22,773 ‫You have all the tour guides. 58 00:02:24,030 --> 00:02:25,600 ‫You have then some pictures. 59 00:02:25,600 --> 00:02:29,870 ‫You have all the locations and displayed on a map, actually. 60 00:02:29,870 --> 00:02:31,610 ‫And you also have the review. 61 00:02:31,610 --> 00:02:34,060 ‫And these, again, are the real reviews 62 00:02:34,060 --> 00:02:37,380 ‫coming from real users in the database. 63 00:02:37,380 --> 00:02:39,940 ‫So, if you were to check out this tour 64 00:02:39,940 --> 00:02:41,363 ‫here in Postman, let's say, 65 00:02:43,500 --> 00:02:46,250 ‫so let's get all tours here first 66 00:02:47,980 --> 00:02:51,100 ‫just to get the ID of the Park Camper. 67 00:02:51,100 --> 00:02:52,393 ‫So, Sea Explorer, 68 00:02:55,770 --> 00:02:57,003 ‫City Wanderer, 69 00:02:58,180 --> 00:02:59,880 ‫so where is that? 70 00:02:59,880 --> 00:03:01,233 ‫Ah, here's the Park Camper. 71 00:03:02,170 --> 00:03:04,123 ‫So, if we get this tour now, 72 00:03:08,950 --> 00:03:10,650 ‫then you will see that, for example, 73 00:03:10,650 --> 00:03:12,690 ‫the tour guides are the exact same people. 74 00:03:12,690 --> 00:03:15,123 ‫So, there's Aarav, Ben, and Kate, 75 00:03:16,130 --> 00:03:19,410 ‫and so, indeed, they are the people 76 00:03:19,410 --> 00:03:21,080 ‫who are actually the tour guides. 77 00:03:21,080 --> 00:03:22,730 ‫So, these three, 78 00:03:22,730 --> 00:03:25,210 ‫and again, the reviews are also the ones 79 00:03:25,210 --> 00:03:29,890 ‫from Ayla, Laura, Isabel, and Alexander, 80 00:03:29,890 --> 00:03:33,690 ‫plus these other ones over there, as well. 81 00:03:33,690 --> 00:03:36,640 ‫And so, if we check out the reviews here, 82 00:03:36,640 --> 00:03:38,807 ‫then indeed, they are coming from Ayla 83 00:03:38,807 --> 00:03:43,090 ‫and Laura and Isabel and... 84 00:03:43,090 --> 00:03:46,150 ‫Yeah, so really, you see that this data 85 00:03:46,150 --> 00:03:48,520 ‫really is the underlaying data from which 86 00:03:48,520 --> 00:03:53,023 ‫this website here is dynamically generated, okay? 87 00:03:54,140 --> 00:03:56,260 ‫Then, we can also log in, 88 00:03:56,260 --> 00:03:57,890 ‫and any of the users that we have 89 00:03:57,890 --> 00:04:00,353 ‫in the database will work for that. 90 00:04:01,750 --> 00:04:04,723 ‫So, if we take a look at one of our users, 91 00:04:06,430 --> 00:04:08,620 ‫so, for example, let's use Steve here, 92 00:04:08,620 --> 00:04:10,593 ‫which is actually a tour guide. 93 00:04:12,690 --> 00:04:14,093 ‫So, we take the example, 94 00:04:16,600 --> 00:04:17,630 ‫use the email, 95 00:04:17,630 --> 00:04:19,563 ‫and the password is, as always, 96 00:04:21,010 --> 00:04:23,010 ‫test1234. 97 00:04:23,010 --> 00:04:25,070 ‫Okay, so we log in, 98 00:04:25,070 --> 00:04:26,880 ‫and this actually happens behind the scenes 99 00:04:26,880 --> 00:04:28,390 ‫using our API. 100 00:04:28,390 --> 00:04:31,120 ‫Okay, and so now, here we have Steve. 101 00:04:31,120 --> 00:04:33,663 ‫We can even open his account. 102 00:04:35,620 --> 00:04:37,780 ‫We can then change the password, 103 00:04:37,780 --> 00:04:39,720 ‫and that, again, is going to happen 104 00:04:39,720 --> 00:04:42,840 ‫behind the scenes using the exact API endpoint 105 00:04:42,840 --> 00:04:46,083 ‫that we built for a user changing his password. 106 00:04:47,830 --> 00:04:49,610 ‫You can then also check out the bookings 107 00:04:49,610 --> 00:04:51,460 ‫of this particular user, 108 00:04:51,460 --> 00:04:53,180 ‫which in this case, shouldn't be any 109 00:04:53,180 --> 00:04:55,170 ‫because he's a tour guide. 110 00:04:55,170 --> 00:04:56,773 ‫So, you see it's empty here, 111 00:04:57,900 --> 00:04:58,970 ‫but anyways... 112 00:04:59,830 --> 00:05:01,520 ‫Yeah, that's what I wanted to show you 113 00:05:01,520 --> 00:05:03,800 ‫because this is what we will be doing 114 00:05:03,800 --> 00:05:06,130 ‫throughout the rest of this section. 115 00:05:06,130 --> 00:05:07,980 ‫So, I hope you're excited about that, 116 00:05:07,980 --> 00:05:09,000 ‫as I am, 117 00:05:09,000 --> 00:05:10,573 ‫and so let's now get started.