DEV Community: Tarun Singh

Server-side rendering(SSR) with React[Part-2]

Tarun Singh — Wed, 11 Aug 2021 11:48:18 +0000

Hello folks 👋, In this article, you'll learn how you can actually server-side render a React App.
This is Part 2 of Server-side rendering(SSR) with React[Part-1]. It is recommended that you go through Part 1 of this article and while you're there don't forget to leave your thoughts. :)

Article mirrors
Read in your preferred platform:

hashnode

Quick Recap

As we saw in Part 1 though SSR solves the problem that client-side rendered app faces like initial load time and with SEO it had its own drawbacks. Every time we visit a new page of our website, frequent requests are made to the server and our app render from the ground up.

Now, we'll discuss how we can solve this issue by SSR with React. Let's go straight on it.

SSR with React

We can have the best of both the worlds with the introduction of SSR with React.

The idea is to render our app initially from the server and then leverage the advantages of Single Page Applications(SPAs) at the client-side.

SPAs are fast and provide us with a good user experience. Therefore, we can render our app on the server initially and then from there on run our app as a SPA. Thus, apps rendered this way are called Universal Apps.

Applications that have the ability to render both on the server and the client are called universal apps.

SSR + SPAs = Universal Apps

Now we enjoy the following benefits :

Fast load time on initial render
Web crawlers can index our page ensuring SEO
Also, we now can leverage the advantages that SPAs offer.

Some React methods that help us in SSR

Let's first look at the method that will be helping us to create our Universal App or Isomorphic React App, another term for such apps.

`hydrate()`

The react-dom package provides us with hydrate() method that is used to combine SSR and client-side rendering.

This is what React docs says about hydrate(),

Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.

Let's first look what ReactDOMServer is.

`ReactDOMServer`

As per the react docs,

The ReactDOMServer object enables you to render components to static markup. Typically, it’s used on a Node server.

`ReactDOMServer.renderToString()`

Now what's this I know it's getting a bit confusing but trust me they are just methods provided by react to work with SSR. I'll be summarizing all this after this last method that you should know.

Again let's see what our dear friend says. As per React docs,

Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

Okay enough, so now you have some idea of what this above method does, let's summarize.

Our Goal

Our aim is to render the initial page directly from our server i.e server-side render our initial requests and then from thereon once we have successfully loaded our initial page we can continue using our client-side app. Therefore, we can set up our Universal (or Isomorphic) App this way ensuring faster initial load as required.

We'll render our App.js component from the server and since this is a react component we require React and ReactDOMServer at the server-side.

The goal is to create a static HTML file inside a build folder(we'll see that how later) and serve that file from the server using the express application.

Next, invoke the renderToString() method on ReactDOMServer. As mentioned above, ReactDOM.renderToString() will return a HTML string. At the server-side we'll then be sending this HTML markup to render and React.hydrate will be waiting for this server-side rendered HTML markup.

A little more clear, huh but now let's solidify the concept.

SSR in practice

We'll be making a simple Pokemon Database app where you can search for your favorite pokemon. We'll only focus on setting up the SSR with React. The entire source code can be found here.

Excited? let's continue.

Step 1 : Project Setup

First things first, let's install our create-react-app and clean up the boiler-plate code.

npx create-react-app ssr-with-react

Next, we need a server. Let's install express.

npm install express

Step 2 : In `index.js` file change `ReactDOM.render()` to `ReactDOM.hydrate()`.

This tells react to render HTML markup coming from the server.

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

Step 3 : Working at the server-side

We're now left to setup our server-side code.
Create a server.js file where we'll setup our server.

import initialRenderRoutes from './routes/initialRenderRoutes.js';
import path from 'path';
import express from 'express';

const app = express();
app.use('^/$', initialRenderRoutes);

app.use(express.static(path.resolve(__dirname, '../build')));

const port = 5000;

app.listen(port, () => console.log(`Server running on port ${port}`));

Let's examine the code. The first line imports initialRenderRoutes.js. I like to split my code following MVC architecture.

In initialRenderRoutes.js we have,

import express from 'express';
import initialRenderController from '../controller/initialRenderController.js';

const router = express.Router();

router.get('/', initialRenderController);

export default router;

So it's pretty simple, if you have worked with an express app, though it wasn't necessary to split up the code but personally I prefer MVC architecture.

Now in initialRenderRoutes.js I've imported initialRenderController.js where our whole logic lies, again done to follow the industry standards.

import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

import App from '../../src/App.js';

const initialRenderController = (req, res, next) => {
  console.log(path.resolve());
  fs.readFile(
    path.resolve('../client/build/index.html'),
    'utf8',
    (err, data) => {
      if (err) {
        console.log(err);
        return res.status(500).send('Internal Server Error');
      }
      return res.send(
        data.replace(
          '<div id="root"></div>',
          `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
        )
      );
    }
  );
};

export default initialRenderController;

Ok so now coming back to our server.js file we serve our static files with the following line,

app.use(express.static(path.resolve(__dirname, '../build')));

Now comes the interesting part. Now as you might have noticed the logic in initialRenderController.js we're first reading our index.html file from our build folder(and to be clear it'll will be generated via npm run build command, we'll discuss this later) and then we
send the HTML markup pre-rendered. Below code in initialRenderController.js demonstrates that.

  ...
 return res.send(
        data.replace(
          '<div id="root"></div>',
          `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
        )
...

As you can clearly see we're replacing the content of our index.html with the HTML markup.
So in this way, we have our app that comes pre-rendered from our server, and by now you know the advantages of loading initial HTML requests from the server.

Step 4 : Managing our entry point to the server

Create a new index.js file which will be the entry point of our server.

require('ignore-styles');

require('@babel/register')({
  ignore: [/node_modules/],
  presets: ['@babel/preset-env', '@babel/preset-react'],
});

require('./server');

Now, what's all this? 🤯 Ok so let me tell you, you'll be requiring some packages so that our app works as desired.

ignore-styles is required for correctly rendering our styles. If you remove this your app will be rendered but without styles and who wants that. So make sure you include this.

@babel/register is required for simply transpiling our code. For more information, you can check out my stackoverflow question which I asked recently. Also, don't forget to check out the comment section of the accepted answer you'll learn a lot from there

Step 5 : Testing our app

Now, you're all done. Let's test our app. Since our server is serving the static files we need to generate them first. Navigate to your working directory and type

npm run build

Now a build folder will be generated which contains all the static files that our server requires.

Next, in your terminal type

node server/index.js

Now check your browser at localhost:5000 you'll see your app rendered on the screen. Hurray! ⚡

Therefore, we've achieved our goal of sending a pre-rendered HTML markup to our users.

Pheww...that's a lot, now you have a Universal(or Isomorphic) app ready with you. Congrats. 🎉

Conclusion

This article was a continuation to Server-side rendering(SSR) with React[Part-1] so I would recommend you to read this quick article to know the WHY behind all this.

I hope you liked the content. More articles are on the way, Stay Tuned! 🔥
If you have any suggestions or questions or found this article helpful, please let me know in the comments.

Follow me on Twitter.

References

Server-side rendering(SSR) with React[Part-1]

Tarun Singh — Wed, 30 Jun 2021 17:44:42 +0000

Client-side-rendering
Drawbacks
Server-side rendering
Drawbacks
Conclusion

This article is not for beginners, I'll assume that you save some experience working with React.
The article consists of two parts, this is Part-1 of the article. The first part covers the fundamentals that are required to actually know how SSR with react works. We'll then move on to Part-2 where I'll explain SSR with react and also the implementation about how can we enable SSR in React and give our app a performance boost.

Article mirrors

Read in your preferred platform:

hashnode

We know how React renders our app on the client-side. We can as well render our React app at the server-side and leverage the advantages that SSR offers us. But before going any further let's have a look at what we mean by client-side and server-side rendering.

What is Client-side rendering?

When developers talk about client-side rendering they're talking about JavaScript rendering the content of our webpage in the browser.

If you have some experience with building react applications, by now you would be familiar with <div id=" root "></div>, that is where our application content renders. The JavaScript file is responsible for dynamically rendering the content of our website.

Drawbacks

When we visit a website that is client-side rendered, with the HTTP request the javascript file is downloaded, and till the time the javascript file downloads we have nothing to render on our screen, we'll be seeing a blank page.
Now, as soon as the download completes HTML markup is loaded, and finally, we see our app rendered.
Initial load time is increased if the size of the js file is heavy. That means the user needs to wait for some time before our app is loaded and we don't want our user to keep hanging till the app loads.

Also, if we're concerned about SEO we should not be rendering our app client-side.
Web Crawlers are unable to index our site since they'll be seeing a blank page while our javascript file still loads. Therefore, client-side rendering impacts our website ranking.

Is there a better way to render our app? Yes! Server-side rendering to our rescue

What is Server-side rendering?

In Server-side rendering(or SSR) we load our HTML pages onto the server instead of rendering them in the browser.
When we visit a website, we make an HTTP request to our server, the server sends back a fully rendered HTML page as a response that almost instantly gets rendered(also depends on the user's internet speed, location of the server, and on a multitude of factors).

This solves our issue related to initial load time. Also, Web Crawler now sees a rendered page and can index our app thereby ensuring SEO.

However, now let's look at another side of the SSR.

Drawbacks

Though it solves the problem that we faced with client-side rendering it has its downside.

Suppose we visit a website that is server-side rendered. Our app loads fully rendered content returned by the server almost instantly as discussed. However, if we navigate to another page of our app, we make another request to our server returning us the corresponding webpage, and then the content is rendered from the ground up.

As we see that even for a small change that needs to be rendered while we navigate to another page the content is fetched and rendered from the ground up. That means with every request the entire new page would be rendered, and not just the new content.
Therefore, we make frequent requests to the server, which is bad.

So, can we solve this issue of making frequent requests and avoid full page reloads? Yes! SSR with React

Conclusion

In this article, we saw two different ways of rendering our content i.e client-side and SSR. We also saw what are the drawbacks of both and how they solve them.

In PART-2 of this article, I'll cover SSR with React and how we can enable SSR in React.

I hope you liked the content, ~~Part-2 is coming soon. Stay Tuned!~~.

PART-2 is now live.🔥

If you have any suggestions or questions or found this article helpful, please let me know in the comments.

Follow me on Twitter.

Off I Go with Hacktoberfest 🚀 🚀

Tarun Singh — Wed, 21 Oct 2020 17:50:10 +0000

What I Learned From Hacktoberfest

This was my first time contributing to open source. This was so much fun. I am new to development but due to this I learned a lot! I am in love with developing now. So great to see this these initiatives that make you push your limits. Wonderful experience. Onwards and upwards.🚀🚀

DEV Community: Tarun Singh

Server-side rendering(SSR) with React[Part-2]

Quick Recap

SSR with React

Some React methods that help us in SSR

hydrate()

ReactDOMServer

ReactDOMServer.renderToString()

Our Goal

SSR in practice

Step 1 : Project Setup

Step 2 : In index.js file change ReactDOM.render() to ReactDOM.hydrate().

Step 3 : Working at the server-side

Step 4 : Managing our entry point to the server

Step 5 : Testing our app

Conclusion

References

Server-side rendering(SSR) with React[Part-1]

Contents

What is Client-side rendering?

Drawbacks

What is Server-side rendering?

Drawbacks

Conclusion

Off I Go with Hacktoberfest 🚀 🚀

What I Learned From Hacktoberfest

`hydrate()`

`ReactDOMServer`

`ReactDOMServer.renderToString()`

Step 2 : In `index.js` file change `ReactDOM.render()` to `ReactDOM.hydrate()`.