Original subtitles

In order to understand exactly what universal rendering is, let's talk about how HTML elements are

rendered in a typical view application first.

So right over here I have two rectangles.

The gray one is going to represent our browser, whereas this green one is going to represent the view

server.

So let's say on my browser I go to WW dot my website dot com.

So once I go onto this website, what's going to happen is the browser is going to make a request to

the view server asking it for h html in order to render it in the screen.

Now, what the view server is going to do by default is send back an empty HTML file.

Now it's not going to be completely empty.

It's going to have the HTML head as well as a body as well as maybe an empty div.

But it's going to have none of the elements that we have defined in our review application.

So other than just the typical boilerplate, it's going to be completely empty.

Now, because of this, it's going to go ahead and render that, but we're not going to have any of

our elements.

And because of that, we're going to be currently in a loading state.

So our user is not going to see our elements whatsoever.

After a short period of time, it's then going to send the JavaScript file.

Now the JavaScript file is going to contain all of the information about all of the different elements

that we need on the screen.

So it's going to contain all that information and it's going to create all of these different elements

and render them on the screen.

So the browser, what it's going to do is grab that JavaScript file and start parsing it.

Now we're still going to be in a loading state, but as soon as it's done parsing, then we will have

the elements all created and fully interactive.

Now this right here is known as client side rendering.

Why is that?

Because the rendering of the UI elements is completely done in the client, the browser, not the server

the client.

Once we get the JavaScript file, the client is the one that passes it and creates the UI elements.

So this is client side rendering.

Now let's talk about another type of rendering called server side rendering.

So in server side rendering, we have our browser, we have our server, we make the same exact request

to my website dot com.

And what ends up happening here is right away what we get is the HTML of that specific page and the

JavaScript.

So we get both right away and we don't just get an empty HTML file.

We get again both the full elements as well as the jazz.

And then right away you can see we have a fully interactive application.

So that right there is server side rendering because the server is the one that is responsible for rendering

the elements.

And then well then it just sends it to the client and the client just uses it.

So the server side rendering.

So now that we understand both, let's talk about universal rendering, which is what Knox uses.

So it's a little bit of both, a little bit of server side rendering as well as a little bit of client

side rendering.

So over here we have our browser, our server, we make a request and then our server is going to send

back the HTML of that particular page.

However, it is not going to send the yes, it's going to send just the HTML of that page.

So as you can see here, we can render the UI elements.

However, they're all grayed out.

They are not interactive.

After a short period of time, then it's going to send the edges.

And what's going to happen is a process known as hydration.

So hydration is where we actually make these static UI elements interactive by parsing the JavaScript.

So that is exactly what hydration is.

And at that point, then the UI elements are going to be functional.

So there is going to be a period of time where this we can see the elements, but we can't really interact

with them.

And then only once we get the JavaScript and is passed and all the hydration is done, then they become

interactive and we can actually use some.

This right here is known as universal rendering, which is exactly what Linux utilizes.