Scripting Exam > Scripting Videos > Server-side Rendering with JavaScript Frameworks > Preact vs. React (Server-side Rendering with JavaScript Frameworks)
Preact vs. React (Server-side Rendering with JavaScript Frameworks) Video
Text Transcript from Video
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
[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
About this Video
4.60/5 Rating
Apr 21, 2026 Last updated
Related Exams
Video Description: Preact vs. React (Server-side Rendering with JavaScript Frameworks) for Scripting 2026 is part of Server-side Rendering with JavaScript Frameworks preparation. The notes and questions for Preact vs. React (Server-side Rendering with JavaScript Frameworks) have been prepared according to the Scripting exam syllabus. Information about Preact vs. React (Server-side Rendering with JavaScript Frameworks) covers all important topics for Scripting 2026 Exam. Find important definitions, questions, notes, meanings, examples, exercises and tests below for Preact vs. React (Server-side Rendering with JavaScript Frameworks).
Introduction of Preact vs. React (Server-side Rendering with JavaScript Frameworks) in English is available as part of our Server-side Rendering with JavaScript Frameworks for Scripting & Preact vs. React (Server-side Rendering with JavaScript Frameworks) in Hindi for Server-side Rendering with JavaScript Frameworks course. Download more important topics related with notes, lectures and mock test series for Scripting Exam by signing up for free.
Description
Video: Preact vs. React (Server of Server have been curated by the Scripting experts, helping you revise the topic quickly for exam preparation. Watch on EduRev.
Information about Preact vs. React (Server-side Rendering with JavaScript Frameworks)
Here you can find the meaning of Preact vs. React (Server-side Rendering with JavaScript Frameworks) defined & explained in the simplest way possible. Besides explaining types of Preact vs. React (Server-side Rendering with JavaScript Frameworks) theory, EduRev gives you an ample number of questions to practice Preact vs. React (Server-side Rendering with JavaScript Frameworks) tests, examples and also practice Scripting tests.
Related Searches
Sample Paper, Preact vs. React (Server-side Rendering with JavaScript Frameworks), ppt, Semester Notes, Preact vs. React (Server-side Rendering with JavaScript Frameworks), video lectures, Summary, practice quizzes, Important questions, MCQs, study material, shortcuts and tricks, past year papers, Exam, Objective type Questions, Viva Questions, mock tests for examination, Preact vs. React (Server-side Rendering with JavaScript Frameworks), Free, Extra Questions, Previous Year Questions with Solutions, pdf ;