How to Render Your React App on the Server-side to improve app performance?

Information may not be reliable

Most ReactJS app developers make use of React CLI, also known as create-react-app (CRA), for initiating React apps, because it is one of the powerful toolchains that offers several advantages. But this approach also comes with a few drawbacks. For instance, when one tries to view the source of any webpage from the web application initialized using CRA, an empty page with a heading and no body section will appear. This happens because CRA renders the applications on the client-side where the page starts loading after built.js file is downloaded to the browser of the user; which hikes the initial load time.

At this time, server-side rendering (SSR) comes into the picture. This blog talks about the server-side rendering in React, its advantages, disadvantages, the frameworks used for the process, and lastly, the basic steps used for rendering the React Apps on the server-side. So, let’s commence.

What is Server-side Rendering?

Server-side rendering i.e. SSR is a well-known technique used for rendering the web pages on a server, rather than rendering them on the browser using JavaScript. In this process, client-side single-page applications are rendered on the server and then the fully rendered pages are sent to the client. The JavaScript bundle of the client takes over and allows the SPA framework to work. This process enables the dynamic components to be served as static HTML markup.

In simple words, when an app is server-side rendered, the content on the app, which is to be displayed to the end-users, is accessed from the server and then passed to the browser for the final displaying.

Initial server-side rendering using PHP, Wordpress, etc meant every page rendered and loaded from the server. However using server-side React, only the initial page is rendered from the server and the subsequent pages are loaded from the client itself. So in this case react app gets performance improvement because of the initial content rendered from the server and the consecutive speedy loads from client-side that is requesting the content that is only needed for upcoming requests.

Pros and Cons of Server-side Rendering in React Apps

Pros:

• Server-side rendering reduces initial load time that means, there isn’t the need for any spinners or loaders for the initial load; which is not the case in client-side rendering. This results in improved performance and better user experience.
• In scenarios where downloading a huge JavaScript bundle gets impaired by a weak network connection, SSR may be useful.
• Besides, when the ReactJS developers opt for SSR, they get a detailed featured image and snippet while sharing the content of a webpage through social media; which isn’t possible with the client-side rendering of the apps.
• SSR process beneficial for a website’s SEO because as per one of the recent updates of Google, its bots can now crawl all the pages of the web apps created with JavaScript i.e. SSR supports SEO practices.

Cons:

• Server-side rendering using React boosts the app performance, but only in the case of smaller apps. But with heavier apps, its performance gets deteriorated.
• It increases response size resulting in longer load times of the pages.
• It increases response time to some extent and if the server is busy, the response time worsens all the more.
• It makes the application a bit complex.

Frameworks to Consider for Server-side Rendering of React Apps

Razzle:

This framework is a project by Jared Palmer and has been extensively used for creating modern JavaScript apps. Razzle is quite easy to get started with and it works not only with React but also with Preact, Angular, Vue, Svelte, etc. Also, it makes use of React Router 4 by default. Some of the top properties of Razzle are:

• It comes with the "battery-pack included”
• It has a similar setup to create-react-app (CRA)
• It has the feature of ‘Universal Hot Module Replacement’ which allows the client and server to get updated automatically once the edits are made.
• Razzle also offers the goodies of ES6 JavaScript

Razzle extracts all complex configuration required for server-side rendering into a single dependency, thus, providing you a good experience of CRA i.e. create-react-app; but then it leaves the app’s architectural decisions about routing, frameworks, data-fetching, etc. to you.

Next.js

Next.js is one of the remarkable frameworks that help to resolve the most commonly faced issues during React.JS app development and helps you successfully design React apps. It comes with numerous built-in features like:

• Automatic code splitting for expedited page loading
• An intuitive page-based routing system
• Pre-rendering: supporting static generation (SSG) as well as server-side rendering (SSR)
• The development environment that offers active support to Hot Module Replacement
• Completely extendable
• TypeScript support

Besides, with Next.js framework, one doesn’t need to worry about minification, smart bundling, hot reloading, etc as all these features are available in the framework. Also, it comes with a robust community to support. Due to all such goodies, this framework is one of the favorite choices of a plethora of web apps and production-facing websites. This framework is being used by popular brands like Netflix, npm, Auth0, etc.

Other Alternatives

In case you and your app development team wants to use a Static Site Generator and not use React, here are a few alternatives to look for:

Gatsby:

This React-based Static Site Generator is quite popular, especially in the JavaScript community. This powerful framework provides an exceptional user experience as well as a great developer experience. It is also a Jamstack delivery platform used for creating lightning-fast, secure and feature-rich websites. It helps develop websites that are incredibly smooth, performance-based, support SEO, highly secure, and scalable.

Gatsby does not do server-side rendering at runtime, but it does SSR with Node.js during build time and while deploying the site, creates static HTML, CSS, and JS. This results in amazingly fast loading times. It also comes with optimizations like route-based code prefetching and splitting.

Nuxt.js:

This is a free and open-source SSR framework for Vue.js which makes web development simpler yet powerful. Based on a modular architecture, Nuxt.js helps to build performance-based apps. It is great for developers as it provides appealing solutions, detailed documentation, descriptive error messages, etc. So, if you want some alternatives for Razzle or Next.js in the Vue.js world, think of trying Nuxt.js.

Basic Steps to enable Server-side Rendering for a React Application

Before looking at the basic procedure of enabling SSR in a React App, there are some prerequisites to be considered. The development team will require to install Node.js locally and also create a development environment locally. Then, the team needs to follow the below-mentioned steps, apply the required code, and get the results.

1. Create the React App
2. Modify the Component of the App
3. Create an Express Server
4. Render the App Component
5. Lastly, configure webpack, npm, and Babel Scripts

This process will successfully render your app to the server-side.

Concluding Thoughts:

We have seen how SSR is advantageous in improving the performance of the apps, getting SEO benefits, and also social sharing. But to be precise, all the apps do not need server-side rendering, especially the apps having a dashboard and the apps that don’t require SEO or don’t need to be shared through social media. Besides, the SSR apps are a bit costly.

So, whether a React app development company should go with SSR for the React apps or not, depends on several factors like your end-goals, your budget, your development team, etc. 

Hope this article provided useful insights into Server Side rendering using React!

To know more about our other core technologies, refer to links below:

Angular App Development Company

Ionic App Development Company

Blockchain app developers