Thanks for the wonderful introduction, Cassidy in China.

There's one of the fun fact that they did not mention which they couldn't have possibly known.

The talk I'm giving to a problem surrendering.

I rehearsed it at least five times just in the last two days.

When I requested last night, I gave the top to my shampoo bottle.

It took 35 minutes.

Whoa.

That's 10 men beyond the limited time I went to bed, Woke up to the morning culturally gave the talk, are goingto under the sample water.

I finished the talk in 20 minutes.

Whoa.

That's a bit too fast.

I need finals time, too.

Need fill us.

I think that's what I'm doing right now.

All right.

Um, so my name is Danish?

Bondian.

I flew all the way from Sydney, Australia, to me, to all beautiful people here.

Boy, am I excited to be here.

I work at a company called Think.

Well, we had a team off JavaScript, Ulla purse.

We work on a lot of java.

Stop stuff the invest heavily in open source.

If you're using react, that's a good chance you're using one off the lips.

Ate a bug bite or someone I think more or is currently maintained by someone, I think.

And the most important part, I go by the Twitter handle.

Flex the Nash.

So I treat about webbed oh, poor performance on recently, I've been blabbering a lot about progress, surrendering all right.

Today we will be looking a lot about how our webpage around us.

We'll start with the basics off.

What happens when a webpage renders on?

We will look into the different strategies offloading, webpages, client said, rendering service side rendering.

And there are two different types, ourselves said, rendering you either under completely on the server are you partially render it on the server.

But the most important part ofall, we will be looking into progress of service side rendering and progressive blindside hydration.

That's good.

Too high if you take any website.

The simple rent up there in the process is pretty simple.

Your brother makes a request.

You're so hostile, hissed Emma, yourself, a sensitive points back.

You see the little flashing their that is word for your browser passes the history Mel on paints the contract on the screen straight too straightforward.

Histamine comes from the server your bro's.

That takes a steel mill, Parsa said, brings it on the screen as easy as simple as a sound.

We're living 2020 now we're building feet Serve its dynamic applications with the contra distended by making AP calls so rendering.

It's not as simple as that.

We need to make a pickles.

We use, Ah, frameworks like reacted to generate the content so patiently.

There's no Im Tae kwon do love.

You're not building static sites anymore.

We're using frameworks.

I trade quickly.

The whole website this built using JavaScript.

So in this case, we have different strategies to relative upset using JavaScript.

1st 1 is clank say.

I don't think that this this is the most straightforward approach, and probably you'll see a lot off simple applications.

Who's inclined, said, wondering what happens in Plain said, rendering us when the browser makes the request, The server sense an empty, empty water to acclaim.

So here in the head we have the scripture.

Don't rock the boat just a bundle, but you can see in the body that is only empty, wrote element.

So once the browser passes it that it's nothing to show on the screen So you just have an empty content.

Brosa then downloads Your job is to bundle.

Once you don't look, completes your, uh, reactor.

What often use us height shows the content on the screen.

So this is client said, rendering your whole JavaScript executes.

Get the content ready, puts it on the browser on.

Everything happens only on the clients, and nothing happens on the server.

This has a serious drawback.

So if you're usually on slower and mobile, networks are spending even if the network slower.

If your bundle file it's pretty big, even if it's find it.

Maybe sometime.

No, not getting once it's gonna go up to even one M V.

If that happens, it will take at least 10 to 20 seconds for your brother to download the bundle.

So for 10 to 20 seconds, users are sitting ducks.

They just watch a blank screen there.

That is no update on what's happening.

So this is where we fall on a protocol server side rendering in Seoul said, rendering When the Broza makes the request, the HTML is generator on the server, so here, from looks like react, they're capable of running job.

When we use the Norge a server.

We can execute the whole react application on the server.

It's entered the content that needs to be shown to the user on the server.

So here, the history that comes back to the user is not just an empty, empty road element.

It comes over with the content.

So the bro's us.

They can pass it on, show the content firsthand as soon as they passed.

Now the brother starts downloading your bundle.

So what?

Since why the brother is donating your sister.

Yusor still sees content on the screen, but that is not interactive yet.

Only after your bundle ISS don't order the content becomes in tractor.

So this process, what's happening here is called hydration.

Hydration is nothing but your react Library water.

With his stimulus on the dorm, React one second on the browser and make sure the contract is the same.

Attach this event listeners and makes it a dynamic.

But again as simple as the sounds, the primary content secondary content we have here, they're not instantly generated on the server.

We have to make a P courses gentry content.

So in reality, this is how service it entering well Look, if we rendered the whole content on the server, Broza makes a request.

So you see, initially there is an empty hits German on the server.

Now on the server, your application makes an AP request.

Now the header pushiness rendered on the server rendered in the sense that estimate string is generator.

Now the rest of the bush in our lab, your sober will make another Ap request again.

The rest of the potions again trended on the server.

So this goes on until your whole site distant The content for your and their application is generator on the servant only after it is done, you can send the response back to the Broza.

If you look at you, look at it here.

The time taken to generate the whole continents Pretty hot.

It can get really, really high if the year Because take a longer time.

So you use us.

They're still waiting.

Knows the time taken to the time that takes to send the first.

The rest wants back to the client.

That's pretty high here.

It can easily take for between one or two seconds, and that is not a small number.

But once the response comes back, you can show it to the browser passes.

It pains the content on the screen and starts downloading your bundle JavaScript fight.

And once the file, it's don't know that your broads a react library runs on the client and hydrates your content and makes it interactive that the drawback we have here is the time that's taking to generate the whole silver content.

It's usually the strategy we up for contracting, that rendering placeholders on the server.

If you look at this approach instead of generating the whole country on the server, we just generate the primary continents over the non critical countenance.

No jetted around the silver.

We just send placeholders from the silver.

So you see, when the response goes back to the client, instead of rendering the whole page, you render the primary content and put in place orders for your second record.

And now you want your browser completes downloading your bundle file.

Your brother reactor will take care off, making their vehicles on the client on hydrate the whole portion off your side.

So you see, in full service and drink, we get to generate all the contract on the server but we cannot send.

The response is immediate.

Using placeholder approach, we get to send a response immediately as soon as possible.

But we still make a certain portions off.

The APP is rendered on the client and the epic also made on the plane The rial burn is if we find a middle ground between a full service state rendering on rendering place orders from the silver.

And that is exactly what we're going to do with progress surrendering before we head into progress of rendering the whole idea and concept off progress of rendering worked with this concept off.

Hey, Streaming streaming!

This is not something new if we don't need the latest closest for his stable streaming to work, this has been around for decades.

Even if you take the oldest of roses in the early days, most of the websites work based on the concept of estimate streaming.

Now we can bring it back to the latest frameworks like react.

So this is what happens in video stream.

Your estimate content of the Broza Rosa makes a request.

You can see the service sent doesn't send the whole estimate.

Just sending the first part off your heads German.

It sliced it up to the header.

As soon as the browser receives it, you're closer.

Can paint it on the screen.

No connection assortment.

The silver can send the second chunk, the other other portion of the history.

As soon as your browser receives it, the browser can trade it on the screen.

This goes on until the last estimate.

Literacy.

So this is streaming off content from the server.

The idea is, your browser doesn't have the wait for the entire history to be downloaded, and your server doesn't have to send the whole content in the first response.

It can send that responses in chunks predictably in streams.

Now, looking at how it works with progress of rendering your bro's and makes a request.

Your server.

First time it sends the place or the like What we did for silver and drink placeholder.

You just put in the primary content on place over on the screen.

No, we don't know.

Java script starts downloading in the background on your silver can send the second chunk recon show the second Rick content on the browser before your job is to bundle download completes and when the third chunk comes in, we just send us.

This is basically concept of stitching.

We sent a script that stitches the content on history that's already on the client Now, once the bundle don't look completes, so because since everything is happening in the background, it happens.

A synchronously wants the bundle don't load completes.

You can just hydrate your content.

Nothing fancy here, so we get the benefits off both using play seven under placeholders at the same time, rendering all your content on the server while I load the stock.

We originally planned only tow talk about progress of surrendering but amazing reacting recently released the experimental conference more and with the conference mode.

We have this beautiful progress of hydration, so the concept is simple.

Rear con current more.

It's not just a synchronous separating the Dominus Notables performance.

It also has progress of high dish in our own suspects boundaries.

What that means is what was the suspect's boundary.

It is just plain old promises under the hood, so when a chunk comes from the server, we can declare it till reactor A hydrate this portion when leaving this junk comes out and we can also tell React.

Hey, if the chance takes a longer time to come in, you can have you render the content on the plane.

Don't elevate it for the server.

So we have granular control over how our suspects boundaries rendered.

So you see when you if you look at progress of hydration, you're under the place or the first on the server sense that junk in the background.

Your bundle fight starts getting downloaded, but here before the third sun comes in, don't bundle.

Donor completes, so you hydrate whatever that's left on your claim on When the rest of the junk comes in REAC and hydrate that portion in the suspect's boundary.

This is pretty fantastic.

Yep, all right.

Those who wrote the article now I built a sample app to see how it works.

It's take a look.

Let's assume this is an average website.

The content you see in darker shades those are going to be our primary content and the content you see in lighter shade that's going to be a second recounted, which means secondly, contradicts not critical.

You don't need to show to user as soon as possible.

Now, if we're under the APP inclined side rendering more.

I'm gonna time Let the network speed toe WiFi.

This is pretty quick, right?

Because wife is pretty fast for you.

Usually read eloped, using faster Internet.

You won't see much difference between client said on drink.

And so I said, wandering in WiFi more so you see, when you serve a render, you have the content here.

But that bundle downloads pretty quickly, and you hydrate the content pretty quickly.

But you can see the real benefit and difference when you start time letting in the network more.

We're in mobile, so if you don't get it using clients, agent ring in the mobile mode, so it takes a while just a white screen.

That's nothing to show to the user.

It takes a while 56 So this one embryo bundle being downloaded for the sake or, for example, and it took six seconds to show the first content of the user.