Hello everyone, welcome to this series of blog posts where we are going to discuss some cool topics. Let us get started!
Today we will look at Server-Side Rendering with React and Node.js. We will look at the basics of this rendering technique, like rendering React on the server and routing React on an SSR app.
For this blog, make sure you download the boilerplate I set up for you since I will be guiding you through it here (https://github.com/joelgzzr/weekly-blog/tree/master/react-ssr-node). Once you have it, you must have something like this:
We will be focusing only on the “src” folder of the project, since the rest of the files are just basic project configurations for Webpack, Babel, ESLint, etc. Still, if you like to take a look at them, feel free to do so.
The “src” folder contains 2 folders: one is for the server and another for the client. We will be looking at the server first. Let’s start first with the “renderer.js” file inside the “lib” folder.
This file, as its name suggests, is a server rendering file. First, we must generate our render for the server to send it to the browser. We use the “renderToString” from React to generate React’s initial render as a static HTML string to then concatenate it to the full HTML template that we return at the end of the file. Helmet is a library that will help us gather the head of our HTML from React. A very important part of the HTML we are rendering is the “window.PRELOADED_STATE” we add to the template since this is where we’ll be adding all the data we gather from the server. When React takes over in the client, it can access the data through there, but we’ll have more on that later.
Next, the “data.js” file inside “utils” is just simple dummy data we’ll be sending from the server to the client.
Now here you have the server file which is, of course, our server.
Express will be our server. The first part is just compression for the source files. After that, we do the “app.get(‘*’)” part where we are telling the server to handle all requests and use the renderer in all of them to send our SSR HTML with our React content. And that is basically it for our server.
Now the client part, where we use React. We have the “index.js” first.
Here is where we’ll use our “window.PRELOADED_STATE” we sent from the server, so we can use it and send it as a prop to our Routes. We then proceed to render our React app with the “hydrate” function so, when React takes over after the initial render, it keeps using that initial render instead of generating a new one.
After this, we have the “Routes.js”, where we’ll have an array of all our routes.
This is just an array with the main route layout, which is the “App”; and a “routes” array which contains all the routes with their respective paths and components. We can also set the “exact” to true to make it an exact route.
The “App.js” file is the main layout route. This will be rendered always in all routes.
This file contains a Header which we want always rendered. The only thing that will change depending on the route will be what is inside the container “div”.
The remaining 2 folders are the “components” and “pages” folders. The “components” folder is where all our miscellaneous components will be stored and the “pages” folder is where all our route components will be stored. Feel free to play around with them.
And there you have it! Today we saw a bit of what React SSR looks like with a Node + Express server. I hope you found this blog useful and keep an eye out for my next post! Also, feel free to use this week’s blog as a boilerplate every time you like (https://github.com/joelgzzr/weekly-blog/tree/master/react-ssr-node).
