Developers
May 20, 2020

Server-Side Rendering (SSR) with React

When using SSR, you provide the ability to a Javascript application to render on the server rather than in the browser.
Source: Pixabay

Server-side rendering, have you ever heard of it? Well, if you are a javascript developer, and you are reading this, it is the perfect time to start applying it.

Server-side rendering (SSR) works to render a single page app (SPA) that is client-side only. It sends the rendered page completely to the client. The client running on javascript can then execute the SPA and make it run normally. When rendering, you can easily share it on social media. As when you render on the server-side, the metadata can be gathered to share in one link.  

Why should I use SSR?

You should use SSR if you are currently finding yourself with some trouble with Search Engine Optimization (SEO). As not every website gets indexed by its content, and this includes many applications too, this helps the SEO to provide metadata to the web and social medial channels. SSR also improves the speed of loading the page for the first time, the initial loading time.  

At the time of optimizing the SEO, it optimizes the way web crawlers transmit information down to the search engine. The server passes the stored information to the client. Normally from Javascript to HTML. HTML is then converted into plain text files that can be understood by web crawlers, and finally, the crawler extracts the links inside the HTML file. In all of this process, sometimes, the web crawler needs help to index the pages on the search engine correctly. That´s when SSR comes to help.

SSR also helps to have better performance. The app is sent from the server on a single request instead of requiring a big setup that can become complicated to load on the server-side.

How fast your browser renders your app, depends on how you build it. The first thing the browser receives is an HTML document. After the HTML document is parsed, the Javascript files are downloaded and executed. As we are now focusing on react, we can understand that the Javascript files will be larger than a single HTML web service that uses Javascript as an addition. The point being, when rendering on the server-side, Javascript is not only a must but a primary topic.

How does it work?

The process to use SSR on a React app is based on developing normally on React, but later on, applying the custom changes to the server. When creating your SSR for React apps, you will have to run a node backend for your server.

To create the app from scratch we will use NPX.

 

Npx create-react-app ssr-app

 

Next, we have to tell our express server 3 things.

  1. To import the app from the client-side
  2. To serve /build folder as static files
  3. To replace information.

On the client-side, we have to replace and Hydrate. To hydrate, we use the following: ReactDOM.hydrate(). Hydrate is the same as Render() but attaches event listeners. So that React then attaches the listeners to the existing markup.

Once you have your server and your client, run your application. If everything runs well, it should run on port 8080

It´s not all positive when it comes to SSR. The more complex your application is, the more complex it is to render it on the server. If it´s a big application, considering what big means in software, it can even make the service to load slower than by rendering on the client-side. Let alone the situation where you are running the service on a computer or phone with low hardware and bad internet connection. SSR is not for every app. But if you are developing a small-medium sized application, then you should consider using it.  

As the applications we are going to run are developed on React, we can expect a Virtual DOM object per every DOM object. DOM, or in words, Document Object Model is "The  Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The virtual version is created on the client-side, it knows not to render the document two times.  

In conclusion, if you are looking to optimize the positioning of your application or website in search engines, without the need to pay more in advertising, but rather be better positioned based on code, then SSR is what you are looking for. It´s not the only positive thing SSR has when it comes to developing on React. One can expect much faster-loading pages and facilities to share on social media. Something not everybody knows, is the limitation of SSR, being that if your app is too big, it´s recommended to render it only on the client-side, as too much on the server-side will make the service slower.

TagsSSRServer-Side RenderingReact.js
Lucas Bonder
Technical Writer
Lucas is an Entrepreneur, Web Developer, and Article Writer about Technology.

Related Articles

Back
DevelopersMay 20, 2020
Server-Side Rendering (SSR) with React
When using SSR, you provide the ability to a Javascript application to render on the server rather than in the browser.

Server-side rendering, have you ever heard of it? Well, if you are a javascript developer, and you are reading this, it is the perfect time to start applying it.

Server-side rendering (SSR) works to render a single page app (SPA) that is client-side only. It sends the rendered page completely to the client. The client running on javascript can then execute the SPA and make it run normally. When rendering, you can easily share it on social media. As when you render on the server-side, the metadata can be gathered to share in one link.  

Why should I use SSR?

You should use SSR if you are currently finding yourself with some trouble with Search Engine Optimization (SEO). As not every website gets indexed by its content, and this includes many applications too, this helps the SEO to provide metadata to the web and social medial channels. SSR also improves the speed of loading the page for the first time, the initial loading time.  

At the time of optimizing the SEO, it optimizes the way web crawlers transmit information down to the search engine. The server passes the stored information to the client. Normally from Javascript to HTML. HTML is then converted into plain text files that can be understood by web crawlers, and finally, the crawler extracts the links inside the HTML file. In all of this process, sometimes, the web crawler needs help to index the pages on the search engine correctly. That´s when SSR comes to help.

SSR also helps to have better performance. The app is sent from the server on a single request instead of requiring a big setup that can become complicated to load on the server-side.

How fast your browser renders your app, depends on how you build it. The first thing the browser receives is an HTML document. After the HTML document is parsed, the Javascript files are downloaded and executed. As we are now focusing on react, we can understand that the Javascript files will be larger than a single HTML web service that uses Javascript as an addition. The point being, when rendering on the server-side, Javascript is not only a must but a primary topic.

How does it work?

The process to use SSR on a React app is based on developing normally on React, but later on, applying the custom changes to the server. When creating your SSR for React apps, you will have to run a node backend for your server.

To create the app from scratch we will use NPX.

 

Npx create-react-app ssr-app

 

Next, we have to tell our express server 3 things.

  1. To import the app from the client-side
  2. To serve /build folder as static files
  3. To replace information.

On the client-side, we have to replace and Hydrate. To hydrate, we use the following: ReactDOM.hydrate(). Hydrate is the same as Render() but attaches event listeners. So that React then attaches the listeners to the existing markup.

Once you have your server and your client, run your application. If everything runs well, it should run on port 8080

It´s not all positive when it comes to SSR. The more complex your application is, the more complex it is to render it on the server. If it´s a big application, considering what big means in software, it can even make the service to load slower than by rendering on the client-side. Let alone the situation where you are running the service on a computer or phone with low hardware and bad internet connection. SSR is not for every app. But if you are developing a small-medium sized application, then you should consider using it.  

As the applications we are going to run are developed on React, we can expect a Virtual DOM object per every DOM object. DOM, or in words, Document Object Model is "The  Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The virtual version is created on the client-side, it knows not to render the document two times.  

In conclusion, if you are looking to optimize the positioning of your application or website in search engines, without the need to pay more in advertising, but rather be better positioned based on code, then SSR is what you are looking for. It´s not the only positive thing SSR has when it comes to developing on React. One can expect much faster-loading pages and facilities to share on social media. Something not everybody knows, is the limitation of SSR, being that if your app is too big, it´s recommended to render it only on the client-side, as too much on the server-side will make the service slower.

SSR
Server-Side Rendering
React.js
About the author
Lucas Bonder -Technical Writer
Lucas is an Entrepreneur, Web Developer, and Article Writer about Technology.

Related Articles