Server-side Rendering React from Scratch! (Server-side Rendering with JavaScript

rolling everybody kick the thing hey
everyone welcome to the react episode in
the server-side rendering with
JavaScript framework series rect is a
really great fit for server-side
rendering because it was designed with
the virtual DOM and the virtual Dom is
like the Dom in your browser except it's
not in your browser because it's you
know virtual and it means it can go
anywhere like on the server so you can
take your same react app and create a
virtual version of it and then render
that out to a string which is just HTML
send that down to the browser the
browser will render that pretty quickly
as we've learned and then it will create
a virtual version on the client now it's
really cool is if this virtual version
on the client matches up with the HTML
we sent down from the server react will
note not to rerender it and this means
that we will have a much faster time to
interactive so let's get started and
dive right down into the laptop so I
have my code editor opened up and I just
have my vs code preferences to make the
screen really big in this case I have my
source folder which I will use to create
all of my react code and I have my
package dot JSON which is full of the
dependencies I need for this app I have
isomorphic fetch which will allow us to
request data not only in the browser but
also on the server and then I also have
react which is the core react library
and react Dom which is the rendering
layer and below I have all these dev
dependencies and I'm going to be using
Babel because I can use new es2015
features and also I can write JSX for my
virtual Dom so we'll be setting up Babel
here in a little bit I also have
expressed for my server I have some
firebase tools to host my server and web
pack to bundle my clients so we'll set
up web pack in just a little bit but for
now let's actually go and build our
react app so in source I'm going to
create
a file called index J s and then from
here I'm going to import react from
react and then I'm going to import from
react - Dom and I'm going to import this
render method so render takes in a
top-level app component so I will name
mine app but you can really name it
whatever you want and the second
parameter render takes in is the place
to attach this component to so we're
going to use a query selector and attach
it to a root element so now I need to go
and actually create this app so I'll
create a new file and I'll call it app
dot J S so just like before I need to
import react from react and then now I'm
going to create a function and call it
app I'm going to pass this parameter of
props into this function so this
function is known as a stateless
functional component and react has
multiple ways of creating components and
this is a really simple way because you
don't have to use a class which is
concerned with life cycles and all this
other stuff it's just a function it
takes in some properties and it returns
the JSX
so essentially if you've created a class
component that uses the render method
this is just the render method so right
here I'm going to return something like
a ul and inside of this ul I'll have a
list of facts so to get these list items
I'm going to iterate through my props
and my props are going to expect an
array of facts to be passed to it so I
can map over these facts and I can
create a list item from them and so just
interpolate facts dot text and then now
that I have my fact I want to also get
the index and set that as the key now
this isn't really important because it's
not going to be helpful to have the
index as the key because it's not really
unique and if things get rearranged it
sort of loses its meaning but it will
keep Reax from throwing an error in the
console which is kind of unsightly so
we're just going to get rid of that for
now so now that I have these list items
I can take my facts down here inside the
UL and this passed them in the middle
and so the last thing I just need to
export this as my default export and
then now go and import it in my index so
now I've created this component but I
actually haven't retrieved any data so
to do that I'm going to create another
file called FAC CS and this is where I'm
going to use fetch from isomorphic fetch
and then I'm going to export a default
function called get fax and well get fax
we'll do is we'll call fetch we will
pass in a HTTP endpoint which is SS r
dot react firebase io comm backslash
JSON and then this returns a promise of
a response and from this response I can
call response that JSON to get back the
actual JSON data which is what we'll
need to render out our effects so now
I'm going to import get fax and from
here I'll call get fax and resolve the
fax from the promise and I can just copy
this paste it inside and then I'm going
to pass fax as a prop which is
effectively calling this function with
the facts as the parameter and you can
see right here that the function app
takes an object of props which we pass
facts into we'll iterate and we'll
create an unordered list so now that I
have this app written I need to take
this code right here and transform it
into something that the browser can
currently understand so to do this I'm
gonna use a combination of babel to take
these es2015
syntax and the CES 2015 imports convert
them to either a common jeaious require
for the server or for a window export
for the browser and then I'll use
webpack to take all these files that
were referencing with these import
statements and bundle them into one file
for the browser so I'll set up web pack
and I'm gonna create a file called web
pack config j/s so web pack is ran on
node and so we'll have to say module dot
exports to export out a configuration so
there's multiple parts of web pack but
the three we're going to focus on today
are the entry the module and the output
so the entry is the entry file this is
the first file to look at for a web pack
to know how to bundle up all of the
files together and in our case this is
going to be our index judge is now the
module section is what web pack is going
to do in the middle of this process and
in our case we want to transform the
es2015 code and all the JSX to browser
code that the browsers of today can
understand and this last part is
information about the output so where do
we want the final product to be saved to
so for entry we just need to provide a
string and say our entry file is source
slash index J s and then with module we
need to specify an array of loaders and
so effectively what we're saying here is
when you load this file transform it in
some way and in our case we want to say
find all the JavaScript files and use
the babel loader and the babel loader
will contain the configuration that we
need to change the imports themit's is
something the browser can understand and
then compile the JSX to regular
JavaScript and then we want to make sure
to exclude no modules because it has all
sorts of crazy stuff in it and now we're
gonna paste this below but instead of
testing for JavaScript we're also going
to test for JSX just in case you create
any files that use the JSX extension now
lastly we're going to do the output
we're going to specify that the file
name is called the bundle J s and the
path is the current directory plus
public and so this will be deployed out
to you firebase hosting as a static file
so now that I'm I can fix it up I
actually want to be able to run it but
to do that I need to make sure that my
dependencies are installed so real quick
I'm going to do an NPM I and now that
all this is done I'm actually going to
peek into my node modules and I'm gonna
open up this dot bin folder so this dot
bin folder is really cool because it
contains all of these binaries that we
can run from the command line and
usually you would have to install these
as a global module and if you're doing
any collaboration in the open-source
community or just in general it can be
kind of frustrating to know what global
modules you need installed to
this project so instead we can actually
use these local binaries to run these
commands so we have Babel we have web
pack we have the firebase CLI everything
we need is in this nice little folder so
what I'll do is I'll create a script
section and my package JSON and I'll
make one to run web pack so I'll go into
the dot bin folder and then right there
I can just call web pack as if it was a
global module so all right npm run web
pack and we have an error and this
unexpected token comes from the JSX
so what we need to do is we need to
create a babel or c file which tells
babel that it needs to transform this
JSX
so now in my files i'm the root level
i'm gonna create a babel RC and this is
going to come with two presets es2015
for es2015 syntax and then react for our
JSX
so now that this is done we'll run web
pack again and just like that we don't
have any problems
so if we go into our public folder we
see of our bundle j/s created it
contains reacts react dom and even our
code so if i search for get facts we can
see that that's transformed and it's
just the transformed version of our gift
facts code that we rip in index that
jeaious so now that we have our java
script written we need to deliver an
HTML document so I'll create a new file
called index.html and I'm going to paste
in a little boilerplate HTML document
you can see that we have our title our
style sheets and our bundle and we also
have this div where the ID is root and
that's where we're going to attach our
react app to and here in the middle we
have this little comment of app and this
will come and really handy soon when we
try to do server-side rendering so now
I'm going to create my CSS just so we
have things organized a little so at
this point I have my app built I have my
configuration done so all I need to do
now is set up firebase and to do that
I'll open up the command line and I'll
use the local binary for firebase and
say firebase and knit
Hosting so I'm going to select the
project called non SSR react cos we have
a server-side rendered yet and now that
our initialization is complete we can
actually serve this app locally so I use
the local binary again and say firebase
serve so right here we have our true fax
app and if I inspect the page source you
can see it's just the boyhood HTML so
our app is working but it's not
server-side rendered so two server-side
render we need to create our server so
in the root of my project I'm going to
create an index J s file from here I'm
going to import from cloud functions and
then I'll also import from react and
then like before I'm going to import
from react Dom but I'm going to import
from react Dom / server because this
will give me the method render to string
so using render to string I can pass in
my top-level app and it will create a
static HTML version of my app so now I
just need to import how we're gonna get
our data with get effects and then
lastly I'm going to import from Express
now I'll create an Express app and
create my squab starstar handler so I
can intercept each request so whenever a
user sends us a request we want to go
out fetch the fax and then create a
server-side rendered version of our app
so I'll call get fax resolve the promise
and then using that I can call render to
string pass through my app and then pass
through the fax so render to string
returns a string so I'm going to store
that as a variable called HTML so now
that I have my HTML I want to set a
caching layer so I'm gonna use firebase
hosting x' CDN caching powers and so to
do this I'm going to set the cache
control header I'll say that the browser
cache time is 600 but the CDN level is
1200 so this means that when the user
makes a request for this server-side
rendered app it will first generate it
but then it will store
in the CDN edge for 1,200 seconds or 10
minutes and in that time frame everyone
who makes a request for that app in the
area will be read from the CDN and not
from the server which results in much
faster load times and it's great for the
server because it doesn't have to keep
generating the same thing over and over
again so now that I have this set up I'm
going to send back the HTML and then the
last thing to do is just to export my
cloud function I'm gonna call it SS our
app and then an on request passed
through the app so let's do a quick
recap
so we imported from cloud functions and
then also react and reacts render to
string we imported our app specific code
being our top-level app component and
our get facts method we imported Express
so we could create our Express app with
our HDB handler whenever someone makes a
request we'll get the facts render that
to string set some caching and then send
back the HTML so another way of our
server code setup we just need to
initialize cloud functions so using the
local module I'll firebase and knit
functions and it's gonna ask us if we
want to install dependencies now and I'm
actually going to skip this so in the
source folder this is where all of my
app level code is and it all uses JSX
and es2015 imports and so what I want to
do is I want to create a server version
of this app and to do that I can
actually use babel to transform this
code in to a common jeaious version and
store that into the functions folder and
I also can do the same thing for the
index.js file as well because if we go
into app just you can see that import
react from react
this is es2015 node currently does not
understand this so we need it to be
transformed into a common j/s require so
to do this I'm going to create a new
script inside of package that JSON and
call it babel so i'm going to use the
babel CLI so we're gonna call babel from
my node modules i'm going to take this
source folder
and I'm going to convert it into the
common jazz version and store it in the
functions folder / source so now when I
run babel you can see that it converted
the files and if we open function /
source we have all of our files and up
here you can see that we're actually
requiring react rather than using an
es2015 import so that is our source but
we also need to transform our server
code and real quick I've noticed right
here that if I say import star as
expressed that will cause an error with
babel so i'm just going to use the
default importance Ted so now I'm going
to chain another command onto the babel
script so I'm going to call babel again
but i'm going to transform the index j s
and just store that into the function
folder so now I'll run babel again and
this time it compiled our source app j s
to the functions folder and then also
the index j s is at the top level of the
functions folder and you can see right
here we have our common j s requires so
we're really close to being able to
deploy this to production the last thing
we need to do is we need to make sure
that we have all the needed node modules
specified in the functions folder for
deployments so if we go to our main
package JSON you can see that we have
three dependencies isomorphic fetch
react in react Dom so I'm actually just
going to copy these open up our
functions package that JSON and paste
them in and the last thing we need to do
is we to specify express as a dependency
as well so now that I have all of my
dependencies specified I'm going to open
up my terminal and CD in to the
functions folder and then install all
the needed dependencies I'll CD out and
now I can set up my deployments so I'm
going to go in my firebase JSON and I
need to specify my rewrite so the source
is going to be the
greedy star start glob and my function
name if you remember is SS our app so if
we go into index J s you can see that we
named it export let s s our app so now
that I have my rewrite setup in all of
my dependencies installed I can do a
local serve so I use the local binary
for firebase say firebase serve only
functions and hosting so here in the
browser we have our app but it doesn't
look like the app that we made before
it's just this unstyled unordered list
so if we go and inspect and view page
source you can see it's just the UL
there's no HTML there's no body there's
nothing it's just this unordered list
because you can see in our server
we're just rendering our app to a string
we're not actually embedding it into an
HTML documents so to do that we need to
import from the file system and we're
going to read the index.html which I'm
going to read file sync in real life
you'd want to use the async version I'm
going to get the index that HTML as
utf-8 and then now what I want to do is
I'm going to create a final version and
I want to replace the comment that I
showed you earlier so if you remember in
index that HTML we have this app comment
so what I can do is I can paste in this
comment and we can replace it with our
final HTML and then pass that back from
the server so now I'm going to run Babel
since we made some changes so now that
I've run Babel I am actually ready to
deploy I want to deploy to a new project
because I deployed a non server-side
version now when I deploy a new project
that has the server-side rendered
version so I'll use the firebase CLI and
call firebase use - - add this will list
out all of my projects and what I want
to do is wanna find the SSR react
version and then it's gonna ask me what
its Ilyas is in this case I'm just gonna
call it SSR since it's the SSR version
and now I can deploy so I'm going to
deploy out and now that I'm successfully
deployed let's go
open it up in the browser so here on the
browser we can see our app and if we
view the source we can see all of our
HTML because our app is server-side
rendered so that's all it takes to get
started with server-side rendering with
react and in the next video we're
actually going to take the non
server-side rendered version in the
server-side rendered version and then
profile them using the chrome dev tools
and webpagetest so make sure to
subscribe so you're notified when that
video lands so that's all for today if
you have any questions make sure to
leave a comment and if you like this
video we'd appreciate you letting up
thumbs up button that's all and I will
see you all in the next video
hello I'm here because the mic is not
agreeing with the shirt so if you don't
see any neck movement that's why I hope
this doesn't creep you out