Switching from React to Preact (Server-side Rendering with JavaScript Frameworks) Video Lecture | Server-side Rendering with JavaScript Frameworks - Scripting

hey everyone welcome back to the action
ideas everyone welcome to the pre-act
episode in the server-side rendering
with JavaScript framework series so in
the previous episode we built a
server-side rendered react app and in
this episode we're gonna take that same
app and we're gonna switch it on over to
pre-act so for those of you who don't
know what pre-act is it is a very small
alternative to react so it has the same
api service level as react but it does
all those things in just three kilobytes
and also in the previous video we have
this problem where even though we were
server-side rendering our app we still
were making this extra Network request
so in this video we're going to switch
to pre-act and fix that extra request so
let's dive down into the laptop and get
started so here I have my editor up and
it's the same app that I had before and
what I want to do now is I want to go
into my package JSON and we can see that
my dependencies are react in react DOM
and I actually can go and get rid of
these I want to keep isomorphic fetch
though so I'm going to install from
pre-act and I need to also install from
pre-act render to string and I'm going
to save that as a dev dependency so you
can see I have pre act and pre act
render to string so now what I need to
do is I need to CD into my functions
folder and then also install pre-act
render to string and pre-act
so now when I deploy I'll have those
dependencies ready on cloud functions so
I'm gonna go into my functions folder I
open up the package JSON and you can see
that we have react in react on still so
we can delete that but we still have pre
act and pre act render to string so now
in index j s i'm going to remove the
import from react and then right here
to change this to import from pre-act
soap react has a render method that
we're going to use but it also has
another method called H and H is its
representation of JSX
when we're building react taps we import
from react even if we don't use react on
the page and while it seems like we're
not using it we actually are because
when the app is compiled to plain old
JavaScript you'll see that react is
referenced in that JSX code so that
virtual Dom app tag actually gets
converted to a react function and the
same thing happens in this case with H
so now I'm going to copy this and I'm
gonna open up the app and paste it in
but in this case I don't need render I
only need H so here we're using lots of
virtual Dom pieces so with this list
item H would be called after the
component is compiled out and the same
with ul down here so now that I have my
imports switch to react I need to set up
Babel to use pre act as well so I'm
gonna go to my babel RC and specify an
array of plugins and then this will also
take in an array I'm going to say use
the transform react JSX plugin and then
provide a config object where you say
for pragma use h and this means use pre
act for JSX
so now that my client side code is
switched to pre act I need to go and
switch to pre act on the server so an
index J s I'm going to get rid of the
react import and I'm going to import
from pre act so now instead of importing
react Dom server we're going to import
from pre act render to string and this
method is now just called render so
we'll change that down below and now
that this is fixed we can go and run our
build so open up the command line and
I'll run web pack and that works so now
run Babel and that runs without any
problems so now I want to go and serve
this app locally you can see that we
have
page loaded but there's a bit of a
problem there's actually two versions of
this list so if I inspect the elements
you see we actually have two unordered
lists and these are two duplicated
versions and if we go into the network
and we throttle and do a profile you can
see the first one loads because it's
server-side rendered and then pre-act
boots up and then renders it again which
is not necessarily what we want so you
can see right around 1,500 milliseconds
it paints a new version of the list so
we actually want to go and fix this
so the first thing I want to do is we're
gonna get rid of that extra Network
request so we are getting facts on the
server there's no reason you need to go
ahead and get fax again on the client so
the trick we can do is we can open up
index that HTML and just like how we're
using this comment to render the app
inside of route we can use a similar
trick to avoid this extra request so I'm
gonna make a script tag and inside of
the script tag I'm going to create a
variable on the window and call it
dunder fax dunder being that it's
wrapped in two underbars and then from
here I'm gonna create a comment and I'll
use the same style as before and say
this is where the facts are going to be
rendered so I'm gonna copy this I'm
gonna go back to my server so now my
server I'm going to create a variable
called fax HTML and I'm gonna set that
to be what replaces the app comment so
now that I have this window variable in
place what I want to do is I want to
embed the JSON data in this script and
that way when the app boots up this data
will be available hanging off the window
which means we won't have to make an
extra Network request if it exists so
I'm going to go back to my server and
I'm going to create a new replace
function so I'm going to move the
original replace where we replace the
HTML it's at the top and now I'm going
to replace the fax comment with a string
a 5 version of the fax array so use json
stringify and now i just return the
final HTML
and we will have our data available on
the clients so now we're going to do an
if statement and we're gonna say if the
facts exist off the window then we want
to render the app with these facts else
we'll do a network request because the
data isn't available now I'm going to
create a function called render app
where I'm just going to consolidate this
render code and now I can just refactor
this and call render app with windowed
under effects and the same thing inside
of this promise I can just pass the
render app so now I've fixed the extra
Network request what I need to do now is
fix that double render and I can do that
here in this render method so down here
in render I can pass through a third
argument so in the middle I'm gonna pass
through a parent container so in this
case the parent if root is body so now
what this will do is it will tell
pre-act that it needs to insert the
facts into the body but it wants to
merge it with the root element so
pre-act will know not to create another
container and to instead merge it with
the existing server-side rendered app so
just to recap we created this if
statement to render the data off the
window if it exists and we refactored
into this render app function that
allows us to avoid that double render by
specifying the parent and the element to
merge with so now I'm going to run web
pack and also go out in run Babel and
from here I can serve locally so now I
have my app running on localhost 5,000
and you can see we have just one version
of it up and running and if I go and
view page source you can see we actually
have this window data in the script tag
so this is all the data we need to
server-side render our app is embedded
right in our document which means we
won't have to make a network request to
go and get it so now all I need to do
is go out and deploy my app and I'm
gonna use the same server code so I
named my function SS our app and in my
firebase JSON I have the rewrite which
specifies all requests that are not
static we'll call the SS our app
function so with that I actually can go
out in deploy and what I'm going to do
though is I'm going to create this
little deploy script and I'm gonna use
the node module binary for the firebase
CLI I'm gonna use pre-act because that
is the alias for my pre-act project and
then once it's used that I can go out
and deploy so NPM run deploy it'll
switch to pre-act and deploy it out
successfully so now I'm gonna go and
open up this deployed app in the browser
so I have my app I'm gonna go and view
the page source
yeah window data we have HTML but now
let's go to the network as we can see
right here when we request the bundle
jeaious it's size is just 6.1 kilobytes
so this is all pre-act
this is all isomorphic fetch and all of
our app in just 6.1 kilobytes and if we
actually go back to the react app and we
inspect that we can see that that was 45
point 8 kilobytes so almost 40 more
kilobytes for these same functionality
so in this video we switched from react
to pre act and we also avoided that
extra network request by embedding the
JSON data in the document and we saw
that with pre act that we dramatically
reduced our bundle size all the way from
45 kilobytes down to 6 kilobytes so in
the next video we're going to take the
server-side rendering of the react app
and profile it and compare that against
the server-side rendered version of the
pre-act app so make sure to subscribe to
get notified when we
least that video and if you enjoyed this
video please make sure to hit that
thumbs up button and otherwise that's
all for today I really hope you enjoyed
this video and I will see you now I'm
gonna go and do a so now I'm gonna go
and simulate a real car
[Music]