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.
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
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!
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.
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.
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 | firstname.lastname@example.org | 214-396-2110