All language subtitles for 3. Pros and Cons of Client-Side and Universal Rendering

In this video.

What I'm going to do is explain some of the pros and cons between client side rendering as well as universal

rendering.

Now to do this, I am going to go to the Nux three documentation page and I'm going to click on the

rendering modes.

Now I haven't showed you the documentation.

It is amazing.

Now, if you don't want to look at the documentation, I tried to cover almost everything here in this

course, so you don't have to worry about that.

But if you ever need a quick refresher or a change in perspective, this documentation is terrific.

Highly, highly suggest that it's always at V3 dot next year.

Dot org.

Really, really good.

So over here I clicked on rendering modes.

And as you can see here, we got the client side rendering.

We also have universal rendering.

Now by default in UX application is going to render everything with universal rendering, but we can

also configure it to do client side rendering if we want to.

Now we talked about exactly what both are and hopefully you guys understand them.

Now let's talk about some of the pros and benefits.

And you can see here we get actually in nice list of pros as well as benefits.

So let's talk about some of the pros.

So pro number one, development speed.

So over here, it says when working entirely on client.

On the client side, we don't have to worry about server compatibility of the code.

For example, by using browser only APIs like the window object.

And this is very true.

So by working in the client itself, we don't have to worry about the server at all.

And this actually gives me a really good example.

Let's say I want to use window.

If I were to use server side rendering, I have to check that.

Hey, are we in the browser?

Is the elements in the browser.

Then we can use a window.

So it just makes it a lot easier and a lot faster.

So development speed is better.

Now it is also cheaper because we don't handle a server.

Everything is running inside of the browser.

So we're client side rendering.

We're not handling a server to send off all these HTML pages.

And over here, when we're offline, it is better because again, everything is running in the browser.

We do not have to make a request to a server which requires a Internet connection.

So those are some of the pros.

Now, let's look at some of the cons.

Now, performance is one big con, mainly because while I showed you this, we have to go ahead and

wait for everything to render.

First you can see the process.

We have to wait for everything to render.

Then we need the data, so we need to pass it and then we get our HTML.

So performance not that great with the client side rendering.

Also search engine optimization isn't that great because well, as soon as we hit this page, all we're

getting back is an empty HTML file and that is what we are rendering for search engine optimization

that is going to pass, the HTML is going to see nothing and it's just not going to be good.

And we might we might not be ranked as highly.

So that is another con.

So now let's talk about universal rendering.

It's pros and it's cons.

So pros obviously performance right away we get at least the HTML.

So it seems as though we're getting our data.

And then once we get our JavaScript, you can just quickly hydrate it and make sure that everything

is rendered properly.

Search engine optimization is great because again, right away we're getting let's go over here.

Right away we're getting the HTML.

So as soon as a search engine goes ahead and parses it, it sees the HTML and will allow us to rank

a little bit higher.

Now, cons are kind of the opposite of the pros here.

So development constraints, it could be trickier and it is definitely trickier to develop knowing that

we are universal rendering because we always have to keep the server in mind and also cost.

So the cost of infrastructure.

Now we need a server to continuously run and that is going to obviously be more expensive.

So those are the pros and cons and it's definitely important to weigh the two together.

I really like universal rendering and it's something that I typically do.

But again, you've got to weigh the options depending on the app.