Preact vs. React (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting

hey everyone welcome to the welcome back
[Music]
everyone welcome back to the server-side
rendering with JavaScript framework
series in the previous video we switched
a react app to pre-act and we also
avoided an extra network request because
we're already rendering that data on the
server we don't need to be getting it
again over the network on the clients so
in this episode we're going to take that
server-side rendered react app and we're
gonna compare it against the server-side
rendered pre-act app and in case you are
wondering I went back and a refactor
that react app so it no longer does that
extra Network request so it's a level
playing field so let's dive down into
the laptop and get started so the left
here I have a pre-act app and to the
right is a react so I'm going to go and
inspect the source for the react app and
you can see that we have the window data
and we have a server-side rendering so
now I'm going to inspect and go to
network and set the regular to G go to
performance and do a profile now that
that's done we can go and inspect what's
going on so we can see that it took 329
milliseconds to get the HTML and then
321 milliseconds to get the CSS and then
after that point we could actually
render our page and there was meaningful
HTML and CSS but even though that was
the case it still will take us 1.8 two
seconds to download the JavaScript and
then once that's finished now our app is
interactive so that happened in just
about two two-and-a-half seconds so now
let's go and profile the pre-act app so
I'm going to view page source just to
show you that we do have the window data
and it is server-side rendered go to the
network and make sure to hit regular 2g
for 300 milliseconds of latency so now I
want to go to the performance tab do a
profile
and we now have our results so you can
see that it took 392 milliseconds to get
the HTML and then 325 for the CSS and
only 559 milliseconds for the JavaScript
which is really great because we were
actually able to be interactive at about
1.2 1.3 seconds or so and if we go and
compare that against the react app which
was 45 kilobytes
it took 1.8 2 seconds to download this
which really push back our time to
interactive so in this case we were able
to save all this time by switching over
pre-act to do the exact same thing so
now I'm going to go and simulate a
real-world page view with web page test
so I'm gonna select moto gen4 and chrome
and make sure that I'm on mobile 3G slow
I'll do one for the react app and then
while that's happening go and create one
for pre-act so now that the react one is
done let's take a look at the results we
can see that the load time was about 1.8
1.9 seconds first byte in about a second
and first render in about 1.3 and we see
that our first interactive is actually
pretty good at 1.8 seconds and we can
see that our first interactive was also
about at the same time as load and its
really good to be aware that first
interactive is in beta so right now you
want to do several runs on this to make
sure that this number stays consistent
or something in this area and also
looking at the filmstrip view can be
really helpful as well so if we look at
the other runs you can see that one was
1.8 this one was 1.8 and the last one
was 2 seconds so it's all just about in
the same ballpark so now if I click
filmstrip view make sure I'm at 0.1
seconds let's start at the beginning
so scrolling you can see it took about
almost a second or so for the HTML and
about 224 milliseconds for the CSS and
then at that point we were able to
under our server-side rendered app
however webpagetest stops us at 1.4
seconds and you can see here that our
javascript bundle goes beyond that and
that's because at this point react has
to create a virtual version of your app
and compare it against the server-side
rendered version to make sure it doesn't
need to do a rerender so we can see that
our first interactive for the react app
was 1.8 seconds so now if we go and
check out the pre-act
app you can see our load time was 1.2
seconds and then the first byte 1 second
the first render 1.3 and the first
interactive was at 1.3 seconds as well
so that's almost half a second faster
than the react app so if we go and view
the other runs as well you can see that
we had 1.2 1.2 and 1.2 so it was fairly
consistent across this test so we'll go
into the filmstrip view at 0.1 seconds
and it took about nine hundred and
thirty-eight milliseconds for the HTML
to download and parse and then 218 for
the JavaScript and 209 for the CSS and
what you'll notice here is that the
JavaScript isn't protruding out to the
right of the timeline
and actually finishes at about 1.2
seconds and that means that our app
booted up we didn't have to do the
network request and we were interactive
in just 1.3 seconds
so with pre-act we can see that it was
1.3 seconds and then react 1.8 so as you
can see with pre-act we were able to get
interactive much faster than we were
with react and that's mostly due to the
fact that pre-act is much lighter than
react and while pre acts seems all magic
and rainbows and unicorns and stuff that
it's not always so easy to switch from
react to pre-act because if you're
really deep in the react toolset and
ecosystem not all of those tools are
going to have a clear path to pre-act
so if you're thinking about switching
from react to pre act for saving on your
library size make sure you do your
research and know that all your tools
are able to move and also know that just
because your
switching from react to pre-act doesn't
mean you're gonna see this massive
savings if you have a lot of application
specific code that's not going to get
any smaller what's going to get smaller
is the actual difference between the
library size so it's a great move but
you still need to be frugal about what
you include in your app so that's all
for today if you enjoyed this video
please hit that thumbs up button and
make sure to subscribe for more videos
in this series so I hope you enjoyed it
and I will see you hey everyone welcome
back to the server-side rendering
JavaScript frameworks with I think we're
done here