‫And before starting,
‫let's just do a quick recap of server-side
‫and client-side rendering.
‫And also, I wanna show you in this video
‫the server-side rendered website that we're gonna build
‫over the next couple of hours.
‫So, remember how in client-side rendering,
‫the actual building of the website
‫happens on the client side.
‫And for that, we need a data source,
‫which is usually an API that sends data
‫to the client as requested.
‫So, that is what we've been building up
‫until this point in the course.
‫But now that you've mastered that part,
‫it's time to move on to server-side rendering
‫and actually build the website on the server.
‫And the main aspect of server-side rendering
‫is building the actual HTML,
‫basically because that's where all our data will be stored.
‫And for doing that, we use templates,
‫which have placeholders
‫where we will then inject our data as necessary.
‫So, whenever there is a request,
‫let's say for the homepage,
‫we then get the necessary data from the database,
‫inject it into a template,
‫which will then output HTML,
‫and finally send that HTML,
‫along with CSS and JavaScript
‫and image files, back to the client.
‫Pretty straightforward, right?
‫Now, we can still then use the API
‫for some of the things on the front end,
‫and actually, we're also gonna be doing that.
‫Okay, anyway, let me now show you
‫what we're actually going to build in this section.
‫So, this is the final rendered Natours website,
‫and it's actually live at www.natours.dev,
‫and so if you feel like it,
‫just go ahead
‫and open this page in your browser now,
‫and take a look.
‫You will have to specify this W-W-W, okay?
‫Otherwise, it's not going to work.
‫Anyway, here you see all of the tours
‫that we've been working with
‫as we were building our API,
‫and all the data here really is the exact same.
‫So, all of our nine tours are here,
‫right,
‫and so again, this is exactly
‫what we're gonna be building in this section.
‫Let's take a look at one of the detail pages here.
‫So, the Park Camper,
‫and so indeed, you have the average rating.
‫You have all the tour guides.
‫You have then some pictures.
‫You have all the locations and displayed on a map, actually.
‫And you also have the review.
‫And these, again, are the real reviews
‫coming from real users in the database.
‫So, if you were to check out this tour
‫here in Postman, let's say,
‫so let's get all tours here first
‫just to get the ID of the Park Camper.
‫So, Sea Explorer,
‫City Wanderer,
‫so where is that?
‫Ah, here's the Park Camper.
‫So, if we get this tour now,
‫then you will see that, for example,
‫the tour guides are the exact same people.
‫So, there's Aarav, Ben, and Kate,
‫and so, indeed, they are the people
‫who are actually the tour guides.
‫So, these three,
‫and again, the reviews are also the ones
‫from Ayla, Laura, Isabel, and Alexander,
‫plus these other ones over there, as well.
‫And so, if we check out the reviews here,
‫then indeed, they are coming from Ayla
‫and Laura and Isabel and...
‫Yeah, so really, you see that this data
‫really is the underlaying data from which
‫this website here is dynamically generated, okay?
‫Then, we can also log in,
‫and any of the users that we have
‫in the database will work for that.
‫So, if we take a look at one of our users,
‫so, for example, let's use Steve here,
‫which is actually a tour guide.
‫So, we take the example,
‫use the email,
‫and the password is, as always,
‫test1234.
‫Okay, so we log in,
‫and this actually happens behind the scenes
‫using our API.
‫Okay, and so now, here we have Steve.
‫We can even open his account.
‫We can then change the password,
‫and that, again, is going to happen
‫behind the scenes using the exact API endpoint
‫that we built for a user changing his password.
‫You can then also check out the bookings
‫of this particular user,
‫which in this case, shouldn't be any
‫because he's a tour guide.
‫So, you see it's empty here,
‫but anyways...
‫Yeah, that's what I wanted to show you
‫because this is what we will be doing
‫throughout the rest of this section.
‫So, I hope you're excited about that,
‫as I am,
‫and so let's now get started.