React Server-Side Rendering

SEO is an important idea for all the sites. In this case, if you are already working with React, you’ll know their sites are no exception in rendering server-side helping search engine crawlers to find your content. It’s also worth saying: React is loved for its modularity, rendering performances and the freedom it gives to choose the stack. Now among all of this, React having a great solid back-end system that supports server-side implementation.

We are in the era of Hybrid Apps which run beyond browser environment. Here is the trend for server-side rendering began by React, which enable to build end-to-end JavaScript apps.
There is a lot of information you need to know before you actually jump into server-side rendering.

What is SSR or Server-Side Rendering?   

Using React will download few HTML pages with the content being filled by JavaScript. Whereas, when using SSR, you entire content will be generated on the server. This means the browser will be able to download HTML page with the content already being in place.

However, the browser still will take care of all the updates to the content.
Notice! The server-side rendering became one of the selling points when react came out. To make your app support server-side rendering, you need an API and node server.

Why there is the need for SSR?

One thing to know as the most fundamental is the SEO. A site with good SEO can bring maximum readers and when maximum reader means good SEO.
You will have many things to get better SEO, but the most important two are:

Making the site crawlable for search engine
Make it fast, with the both being exceptionally done by React SSR
Server-side rendering framework is great, as a result, it will focus on these three concepts:

1. Performance – SSR will only increase your performance of your app. The browser will display your rendered component as soon as it downloads HTML and CSS, thereby it does not wait for React to render or JavaScript to download. For most cases when your JavaScript file is larger, this will be a massive improvement.

Note: – But sometimes in certain cases, it degrades the performance. You know working with SSR loads extra work to the server, and thus it can take a longer time that usual to return your HTTP response. The worst-case is when your server is under heavy load.
We can also say, your HTML page size will increase when your React components contain long tables or list, and it can take a longer time to download.

2. SEO – SSR will allow search engine crawlers to easily find and fetch your content.
As you see search engine crawlers does not support JavaScript, that means your site won’t be shown up in search engine, thereby the crawlers will see only a blank page. In fact, this was quite a big reason to have gone React server-side rendering.

Note: – Still, Google can find your content even without SSR, and this seems to be the only search engine that renders JavaScript till now. Even not Bing, Baidu or Yahoo.

3. Complexity – SSR provides less time working on improvements as well as features, thereby increasing the complexity in the following ways.

• APIs: Whenever your React components making a request to API, it will possess a unique behaviour on the server by directly querying the database or any application logic.
• Node Support: You have to check if the window and other browser-specific APIs do exit before running React components on the node.
• Two Routers: Also, you will have to rewrite the server if you had used react-router on the client side.

Issues of SSR
In spite of how efficient or fast your app is, you still will see a white screen if your response time is delayed. This is because it heavily depends on the API server’s response time.
I would go even further and say when it is trivial to and not to use SSR

USE
• When you need super best performance to your already working React app and also ready to pay extra server resources.
• When you need SEO on Yahoo, Baidu or Bing.
DON’T USE
• When you feel that the SEO on Google is well enough suited under the condition of “Google is crawling your content.”
• When you still on the verge of making your React app work first.
• When your server resource is minimal due to inability to scale or very low budget.

Bottom Line
Server-side rendering is one solution if your SEO on the search engine is important to you. So, if you consider SSR making some sense to your app, then do yourself a favour, join the mailing list code@codingmart.com and hear about our site optimising tips. Because we love hearing all your queries and offers!