What is Server-Side Rendering (Server-side Rendering with JavaScript Frameworks)

you know that was funny I was thinking
of myself I was like everyone David here
and welcome to the very first video in
the server-side rendering with
JavaScript framework series in this
series we're going to be using cloud
functions in firebase hosting to build
fast loading server-side rendered
JavaScript framework apps I'll be
covering how to use react angular
pre-act UJS ember and next js4 react
we're going to be releasing new videos
every single week so make sure to
subscribe to stay up to date so you're
probably wondering what is server-side
rendering and what is the real benefit
server-side rendering is the process of
taking a client-side JavaScript
framework website and rendering it to
static HTML and CSS on the server and
why is this important well we all want
fast loading web sites and server-side
rendering is a tool to help you get your
website rendered faster so let's take a
moment to talk about the critical path
in your web sites first render so the
critical path is a reference to the
process of delivering the most important
pieces of content to the browser so we
can render your page if we can deliver
the most important assets quickly then
the browser can do its job and render
the page quickly to the user the
delivery of your website is well handled
by firebase hosting firebase hosting is
HTTP to enabled and it's also backed by
a CDN for fast delivery around the world
however how fast the browser renders
your app depends on how you build it the
first thing the browser receives is an
HTML document this document contains
references to other assets like images
CSS and JavaScript and the browser knows
to go fetch and download these assets
when it parses this document so even
though the browser has your HTML it
can't render the website until its
corresponding CSS has finished parsing
but what's that done the browser goes
ahead and renders the page that means
that with just HTML and CSS the browser
can render the page
and the browser is really really good at
this so it actually does it very fast
now the last part of this process is
JavaScript
after the HTML document is parsed the
browser will go and download your
JavaScript files and the download time
of a JavaScript file can be significant
if the file is large and the network is
poor and the browser needs to parse the
JavaScript and on devices with low
powered hardware this can take quite a
bit of effort in time and you can really
see some slow load times if your first
render is dependent on JavaScript if you
want a fast first render of your website
you will need your site to have a
meaningful HTML and CSS for the user
javascript should be considered as an
enhancement of that HTML and CSS since
it's loading can be deferred however
it's not always that simple some types
of websites need complex features that
rely heavily on JavaScript these kind of
websites use javascript frameworks like
angular react pre act view j/s but
there's an inherent problem when it
comes to using these frameworks they tie
up your rendering code in JavaScript on
poor networks this can be a disaster for
your first render it's not all doom and
gloom though as my friend addy Osmani
once said JavaScript frameworks can be
fast if you're willing to put in the
work and we can put this work in with
server-side rendering because with
server-side rendering we can generate
the HTML on the server and send that
down to the browser so the user will see
the HTML version of your app almost
immediately as the JavaScript app boots
up in the background and so while this
may not make your page load faster than
a non server-side rendering version it
does give the user something to see as
the JavaScript downloads in the
background so while this is a really
nice benefit there is a cost to
server-side rendering first of all
server-side rendering isn't free there's
time and effort that's needed on the
server to generate these documents so if
it takes you a while to do this
generation and you're not gonna have a
fast page load however firebase hosting
is really well-suited for this we can
dynamically generate our content with
cloud functions and then firebase
hosting will let you store that in the
CDN cache so that means when the next
user visits the website it won't do the
generation again it'll
serve it from the local CDN edge and
this has a great benefit when it comes
to performance and it takes a lot of
effort off of the server secondly after
the browser has finished processing your
HTML and CSS it will still need to parse
and execute your JavaScript and this can
be really heavy on the browsers main
thread and so while the user will be
able to see your application it will be
in this frozen state where they actually
can't interact with it and so it's an
only after that this JavaScript has
finished parsing and executing that the
application will be interactive to the
user and this is can be tracked through
a metric known as time to interactive
and time to interactive is when a user
requests your website to when they can
actually use it and will actually be
covering in this series how we can track
and improve time to interactive using
server-side rendering this video series
is a bit of a choose your own adventure
book we're going to be covering how to
implement server-side rendering through
various frameworks so you can pick the
frameworks that you're interested in but
we're also going to be releasing a
companion video to each one of the
implementation videos where we'll be
profiling a non server-side rendering
version versus a server-side rendered
and we're going to be using the chrome
dev tools to inspect the critical path
and the network timeline but we're also
going to be using another great tool
called webpagetest and with webpagetest
we can test on real devices on throttle
network to help simulate and real-world
use case we're gonna be releasing new
videos every week so make sure to
subscribe to the firebase YouTube
channel to stay up to date so that's all
for this video if you liked it when
you'd appreciate you hitting that thumbs
up button and if I didn't name your
framework of choice please leave that in
the comments below so we can cover it in
a future video and I hope to see you in
the next video
that's all for this video if you would
like that we would sure appreciate a
thumbs up clicking it but you could just
thumbs up us just just give it a thumbs
up that's good too
[Music]