All language subtitles for 002 Recap_ Server-Side vs Client-Side Rendering_Downloadly.ir_en

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.