DAVID EAST: Welcome back to the Server-side Rendering
with the Ja-- with the JavaScript.
Hey, everyone.
Welcome back to the s--
[MUSIC PLAYING]
Hey, everyone.
Welcome back to the Server-side Rendering with JavaScript
Framework Series.
In this video, we're going to profile
a non-server-side rendered react app, and then go and compare
that to a react app that is server-side rendered.
We're going to use the Chrome DevTools to get
a good look at what's going on.
And then we're going to simulate a real world test,
using Webpagetest.
So let's dive right down into the laptop.
To the left here, I have my non-server-side rendered app.
And to the right, I have my server-side rendered version.
So I'll start by profiling the non-server-side render.
If I view page source, you can see it's just this boilerplate
HTML.
So I'm going to inspect the non-server-side rendered
and go to the Network tab.
I'm going to ensure that the cache is
disabled, while the DevTools is open.
And then I'm going to go to the Throttling,
and I'm going to choose Good 2G which
will have us incur 150 milliseconds
of latency per around trip.
So now I'm going to go into Performance and run a profile.
So we have right here our time line.
We can see that the HTML downloaded in 185 Milliseconds,
the CSS in 174.
And right here, we don't have any meaningful HTMLs,
so it's just a blue background.
So we have to wait for the JavaScript
to download, which took about a second.
And then after the JavaScript downloaded, parsed,
and executed, we then had to make an API call.
So we still didn't have the render ready.
So that was 255 more milliseconds to get the JSON
data.
And once that's done, we can then render our page.
So now let's profile the server-side rendered app.
So Inspect, Network, and select Good 2G.
Go to Performance and run the profile.
Now that it's done, we can see that it took about 221
milliseconds for the HTML to download, and then
167 milliseconds for the CSS.
And then about 500 milliseconds we
had meaningful HTML to render for the user,
because remember all the browser needs to render the page
is HTML and CSS.
So you can see that our JavaScript is actually still
downloading in the background.
And so that took just a little under a second.
And then once that's done, you can
see that our app still went out and made a network
request for the facts, even though it
was server-side rendered.
And I'll actually show you how to fix this in the next video
when we switch to Preact.
But you can see that it still didn't do another render.
So our app was about interactive at about 1,500 milliseconds.
So to see this work, though, in real life,
let's go out and run Webpagetest.
So Webpagetest, I want to select a mobile device
on a throttle network.
So I'm going to use my non-server-side rendered app
first.
Select a Moto G Gen 4.
Make sure it's on Chrome.
I will then use the mobile 3G slow which is 200 milliseconds
of round trip latency.
And then I will start the test.
And while it's running, I'm going to do the same thing,
but for the server-side rendered app.
So now that the non-server-side rendered profile is finished,
we can see that the load time was about 1.7 seconds.
At the first byte came in at about a second,
and we rendered shortly after.
But the time to Interactive over here was about 2.9 seconds
so even though the load time was 1.7, 1.8 seconds,
we weren't interactive until 2.9 seconds.
So the app wasn't usable until almost 3 seconds.
And if we don't look at all the runs down below,
you see that the first view was 1.7
and the other second one was 1.7.
And they're all about the same.
So when you go back up to the first run
and click on the filmstrip view, and I
want to make sure that I'm at the 0.1 second view.
So I'm going to scroll all the way back to the beginning,
and I'm going to profile what happens as we
scroll through the page load.
And you can see, actually, that this red bar matches to where
we are in the filmstrip.
So we're going to first start out
by requesting and downloading the documents.
And that happens in about 926 milliseconds.
And then we're going to request the CSS, which
took about 210 milliseconds.
So at 1.2 seconds we were ready to render that blue background.
But we don't have any meaningful HTML.
So we have to download the JavaScript
and execute that to make our API call.
So the JavaScript took about 642 milliseconds
to download and execute.
And then it took about 1 second for the facts.json to load.
And so we can finally render our page 2.9 seconds.
So now we can see why that the main page
showed that our app wasn't interactive until 2.9 seconds.
It's because we had to execute the JavaScript,
make the request, and then finally our app
was ready for use.
So now let's compare this to the server-side rendered version.
We see that the load times are very similar--
1.6, 1.7, and 1.5.
And the median load time was 1.6 seconds.
The first byte came at 0.7.
We rendered at about a second.
But we can see that the interactive was at 1.6 seconds,
so really quick to the load time.
So we can actually go into the filmstrip view
and make sure we're at 0.1 seconds,
and we'll start from the beginning again.
So it took about 760 seconds to download and parse
the HTML, and then 212 milliseconds for the CSS,
and then 643 for the JavaScript.
So we could actually render, though,
at 1.1 seconds because we had all of our HTML and CSS.
Now the time to Interactive wasn't until 1.6.
So that's about a half a second the user was not
able to interact with the app.
And we can't actually see that here in the timeline,
because it cuts it off at the first render.
And one thing you also want you to notice here
is down at the bottom of the request,
the fifth request is still the facts.json.
We are still making this request,
even though we have server-side rendered
the app, which will push out our time to interactive.
So with the non-service-side rendered app
our timed interactive was almost 3 seconds.
But when we server-side rendered,
we chopped that all the way down to 1.6 seconds.
So if we go back to the Chrome DevTools,
you can see that at about 1.5 seconds
is where we make that HTTP request for the JSON.
And then it finishes at about 177 milliseconds later.
So this is time that we could actually be interactive.
So as you can see, server-side rendering your react app
drastically cuts down on when your website is first rendered
and when it becomes interactive.
And also if we could have avoided that extra network
request, we could have been interactive even faster.
So in the next video, we're actually
going to switch from React to Preact.
And Preact is this super light React alternative.
So it has the same API surface level as React,
but it's much, much lighter, coming
in at around 3 kilobytes.
So in that video we're going to switch on over to Preact,
and then we'll also avoid that network request.
So that's all for today.
If you like that video, please make sure to hit that
thumbs up button and subscribe, if you
want to stay up to date with all the videos in this series.
That's all.
I will see you all in the next video.
[MUSIC PLAYING]
Please, David.
Just do this.
And please, you, stop wrestling.
You're like, and rolling, and you're like, slam.