So you’ve decided to use React for your app. Congratulations, you’ve made a fantastic choice. Over the past few years, React has become the leading JavaScript library for building web applications. The whole idea of building a web app without a JavaScript library or framework may seem antiquated at this point.
As an experienced developer, I was pretty much winging it in setting up and structuring my app before the patterns from React came along. The component-based architecture – where the pieces of your app live in different files and have their own state – was a revolution for developers. It’s really made things a lot easier.
At OMG, we’re sold on the benefits of React and it powers all of our frontend apps. Let’s talk about different approaches we’ve taken to deploy React applications.
What is Client vs. Server Rendering
When you’re choosing React, you have two options for rendering the UI: client-side rendering and server-side rendering.
Client-Side Rendering
By default, your React app will be client-side rendered. This means basically, all of the source code will live in JavaScript files referenced in a single HTML file that initializes your app. This source code can be uploaded to a cloud storage provider like Amazon S3 and a domain can be pointed to served files. That’s as complicated as it gets. Another term for this kind of app is a single page application (SPA).
Server-Side Rendering
A server-rendered React app uses a Node.js server to prerender React components before they are loaded by the browser. Unlike client-side rendering, you’ll need a virtual machine or web server that supports Node.js. Of the two deployment options, this will be more pricey. Your company will have to pay to run a web server and keep it running vs. the client-side approach that’s just static files and storage.
Benefits of Server-Side Rendering
I haven’t really sold you on server-side rendering yet, and it sounds like it’s harder and more expensive than the alternative. Obviously, with the effort there has to be some benefits. Here are 3 huge benefits to server-side rendering your React app:
Search Engine Optimization
A client-side rendered React app renders after the JavaScript has loaded on the client. That means when the HTML loads, there’s nothing more than an HTML tag to target the content and a script tag loading the JavaScript. The magic of a client-rendered React app happens in the virtual DOM, not in the actual HTML markup.
You can see how a client-rendered react site renders in the browser by viewing the source code. There’s not a whole lot there. This is because the structure of the site is being produced in memory. While this is good for performance, it’s not so good for search engines. Google has improved in being able to read the structure of single page applications. Nonetheless, an app that needs to be bootstrapped with data or something more complex will take an SEO hit with client-side rendering.
Server-side rendering solves the SEO problem by rendering the HTML markup on the server so there’s something for the search engines to see and links for it to follow. When you view the source of a server-rendered React site, there are actual HTML tags. Amazing!
Performance
Nobody likes a slow website. One of the problems of a large, client-rendered React app is the dreaded flash of white. When you access a React site, the JavaScript code has to download. Because there is no HTML or virtual DOM before that completes, there is a delay before any content displays in the browser, leading to a blank white page. On mobile, the delay can be more pronounced due to slower internet speeds.
To enhance performance, server-side rendering more quickly returns valid HTML to the client so that there isn’t a wait to see content. This is more or less a magic trick, because the same amount of code has to be downloaded, but visually the end user doesn’t see that flash of white since HTML is prerendered.
Maintainability
One major issue with client-rendered applications is that the frontend part of any application is usually only half of the code base. You are then having to manage two (or more) code repositories for the same app: a client-side and an API code base. While you could maybe fashion a single repo out of these two sides of the application, that increases the complexity of the build.
By having a Node.js server already available to bootstrap the data, you can keep a significant portion of the code base in one code repository to make changes on the fly. Additionally, you can bootstrap the frontend with the data it needs without needing to make any HTTP requests on the client.
Additionally, as an app grows larger, it becomes difficult to maintain as a single page application. Eventually, the bundle will need to be split along the routes, and server-rendering the code base makes this relatively simple.
The OMG Approach
At OMG, we take a hand-rolled approach to server-side rendering all of our apps. This means we use React’s built-in server rendering API and a few packages. This keeps our builds light, reliable, and flexible. It allows us to selectively bootstrap the app with data that runs server-side. This is also faster than making client-side API requests.
Many of our React components are part of an overall UI Framework that allows for easy code reuse through NPM packages. This also includes the basic bootstrapped server-side React app we use as a template for new applications.
Additionally, we split the bundle along the routes. This means that when a visitor goes to a specific page, they only have to download the code for that page and not the entire code base for the app. This also improves performance.
Conclusion
At OMG, we not only love React and JavaScript. We also love rolling out new features for our clients. We have as much passion for producing high quality code as we do providing a fantastic user experience. Server-rendering React makes our apps faster and more maintainable. It’s a pleasure to be able to work with the latest technologies at OMG to move our products forward.
About OrderMyGear
OrderMyGear is an industry-leading sales tool, empowering dealers, distributors, decorators, and brands to create custom online pop-up stores to sell branded products and apparel. Since 2008, OMG has been on a mission to simplify the process of selling customized merchandise to groups and improve the ordering experience. With easy-to-use tools, comprehensive reporting, and unmatched support, the OMG platform powers online stores for over 3,000 clients generating more than $1 billion in online sales. Learn more at www.ordermygear.com.
Media Contact: Hayley Bell | hayley@ordermygear.com | 214-396-2110
