Server Side Rendering in React
Utilizing express and React render methods to improve rendering performance
January 25, 2018
2018: The Year of Fast WebApps
There is a huge demand to improve how fast your web application loads at load time. With tools like Lighthouse built in to Google Chrome, there is pressure put onto web developers to enhance their applications. Using new terminology like Search Engine Optimization, First Paint, Deferred Loading, you may be thinking that there is no way I can get a perfect score. Additionally, you probably never considered using Service Workers and being concerned about how fast your React app loaded on 3G.
Good news is that in 2016, when Lighthouse was publically announced, many websites were already utilizing the tool and coming up with best practices. Its 2018 now, and we have had plently of time to improve. One of the main concepts that has been argued about, is server side rendering.
What is Server Side Rendering?
So for the purpose of unifying the concepts of this article, I am going to use React for all of the examples. Additionally, I will be talking about the JavaScript library called Express that can be used to handle HTTP requests, similar to Flask for Python.