How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting

welcome back to the server-side
rendering with the jaw with the with the
JavaScript hey everyone welcome back to
the everyone welcome back to the
server-side rendering with JavaScript
frameworks 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 gonna use the
chrome dev tools 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 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 dev tools is
open and then I'm gonna go to the
throttling and I'm gonna choose good 2g
which will have us incur a hundred and
fifty milliseconds of latency per
roundtrip so now I'm going to go into
performance in run a profile so we have
right here our timeline we can see that
the HTML downloaded in 185 milliseconds
the CSS and 174 and right here we don't
have any meaningful HTML 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
work profile the server-side render 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 as
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 pre-act
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 web page test so in
web page test I want to select a mobile
device on a throttle network so I'm
gonna 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 that's running
I'm going to do the same thing but for
the server side rendered app so now that
the non server-side rendering 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 three seconds and we
go and look at all the runs down below
you can see that the first view was one
point seven and the other second one was
one point seven and they're all about
the same so I'm going to go back up to
the first run and click on the filmstrip
view
and I want to make sure that I'm at the
point one 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 you can
see actually that this red bar matches
to where we are in the filmstrip so
we're gonna first start out by
requesting and downloading the documents
and that happens in about 926
milliseconds and then run request the
CSS which took about two hundred and ten
milliseconds so at one point two 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 six hundred and forty two
milliseconds to download and execute and
then it took about one second for the
FAQs that JSON to load and so we can
finally render our page at two point
nine seconds so now we can see why that
the main page showed that our app wasn't
interactive until two point nine 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 that the load types
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 point 1 seconds and we'll
start from the beginning again
so it took about 716 milliseconds 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 over HTML and CSS now the time
to interactive wasn't till 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
to notice here is
down at the bottom of the request the
fifth request is still the fax JSON we
are still making this request even
though we've server-side render the app
which will push out our time to
interactive so with the non server-side
rendered app our time to interactive was
almost three seconds but when we
server-side rendered we chop that all
the way down to one point six seconds so
if we go back to the chrome dev tools
you can see that at about one point five
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
pre act and pre act 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 three
kilobytes so in that video we're going
to switch over to pre act and then we'll
also avoid that Network request so
that's all for today if you liked 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]
please you stop wrestling you're
enrolling like whoo