Scripting Exam > Scripting Videos > Server-side Rendering with JavaScript Frameworks > How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks)
How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting
FAQs on How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) Video Lecture - Server-side Rendering with JavaScript Frameworks - Scripting
| 1. How fast is React SSR compared to client-side rendering? |  |
Ans. React SSR (Server-side Rendering) is generally slower than client-side rendering. This is because SSR involves rendering the React components on the server before sending the HTML to the client, which adds an extra step in the rendering process. However, SSR can improve the initial load time of the page as the server sends a fully rendered HTML to the client, reducing the need for additional API calls.
| 2. What are the advantages of using React SSR? | |
Ans. There are several advantages of using React SSR:
- Improved SEO: SSR allows search engines to crawl and index the fully rendered HTML, resulting in better search engine optimization.
- Faster initial load time: As the server sends a fully rendered HTML to the client, the initial load time can be significantly reduced, providing a better user experience.
- Better performance on low-end devices: SSR can be beneficial for users accessing the website on low-end devices or slow internet connections as the server performs the initial rendering process.
- Enhanced social media sharing: SSR ensures that social media platforms can scrape the fully rendered HTML, leading to better previews when sharing links on social media.
- Progressive Enhancement: SSR enables the website to work without JavaScript enabled, making it more accessible to a wider range of users.
| 3. Can React SSR be used with any JavaScript framework? | |
Ans. React SSR can be used with any JavaScript framework that supports server-side rendering. However, it is primarily designed to work with React as it provides specific APIs and features to facilitate server-side rendering. Other frameworks may have their own server-side rendering mechanisms.
| 4. Does React SSR improve performance for dynamic web applications? | |
Ans. Yes, React SSR can improve performance for dynamic web applications. By rendering the initial HTML on the server and sending it to the client, React SSR reduces the time required for the initial page load. This can result in a faster perceived performance for users, especially when dealing with complex or data-intensive web applications.
| 5. Are there any drawbacks or challenges associated with React SSR? | |
Ans. Yes, there are some drawbacks and challenges associated with React SSR:
- Increased server load: SSR requires the server to perform the rendering process, which can put additional load on the server, especially when handling a large number of concurrent requests.
- Development complexity: Implementing SSR in React can be more complex compared to client-side rendering, as it requires setting up a server environment and dealing with server-specific considerations.
- Limited client-side interactivity: SSR renders the initial HTML on the server, which means that certain client-side interactions or dynamic updates may require additional client-side rendering or JavaScript execution.
- Caching and invalidation: Caching and invalidation strategies become more complicated with SSR, as the server needs to handle cache management and invalidation when the underlying data changes.
Text Transcript from Video
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
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
About this Video
4.81/5
Rating
Sep 21, 2025
Last updated
Related Exams
Video Description: How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) for Scripting 2025 is part of Server-side Rendering with JavaScript Frameworks preparation.
The notes and questions for How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) have been prepared according to the Scripting exam syllabus.
Information about How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) covers all important topics for Scripting 2025 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks).
Introduction of How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) in English is available as part of our Server-side Rendering with JavaScript Frameworks for Scripting & How Fast is React SSR? (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 Lecture & Questions for How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting - Scripting full syllabus preparation | Free video for Scripting exam to prepare for Server-side Rendering with JavaScript Frameworks.
Information about How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks)
Here you can find the meaning of How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) defined & explained in the simplest way possible.
Besides explaining types of How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) theory, EduRev gives you an ample number of questions to practice How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) tests,
examples and also practice Scripting tests.
Related Searches
Objective type Questions
,Free
,video lectures
,How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting
,Exam
,study material
,Summary
,Important questions
,past year papers
,Sample Paper
,Viva Questions
,Previous Year Questions with Solutions
,ppt
,shortcuts and tricks
,MCQs
,Extra Questions
,How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting
,How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting
,mock tests for examination
,Semester Notes
,practice quizzes
;
Study How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) on the App
Students of Scripting can study How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks),
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of How Fast is React SSR? (Server-side Rendering with JavaScript Frameworks) is prepared as per the latest Scripting syllabus.
|
© EduRev
|
Education Revolution
|
|
Signup on EduRev and stay on top of your study goals
10M+ students crushing their study goals daily