Server-Side Rendering in React: When Does It Become Beneficial to Your Web Program?

Abstract: In recent years the technology of web application development has improved a lot and JavaScript frameworks such as React and Angular have increased in popularity. These frameworks use client-side rendering and have led to the rendering method’s increase in popularity compared to its previous conqueror; server-side rendering. Server-side rendering, however, is still a viable option in certain cases. For instance, it provides improved performance on computers depending on the hardware specification and search engine optimization. This thesis is an experimental study that aims to present knowledge regarding the rendering method's benefits and drawbacks. The study also presents when server-side rendering becomes beneficial to your web program compared to client-side rendering. The thesis also includes another rendering method using client-side rendering but with a configuration called virtualized. In this study, two identical web applications containing a grid were built. The rendering method using the server side was on one application and rendering methods using the client side were on the other application. The evaluation metrics of the rendering methods were the time to render the grid and how good of a user experience they provided. The results show that virtualized offers a faster rendering time and better user experience, especially at larger grids. Server-side rendering was faster than client-side rendering at all grid sizes and they had a similar user experience. Overall, this thesis suggests using virtualized when suited. Regarding server-side rendering, this thesis recommends using it carefully since it requires complex implementation and maintenance along with higher costs. Therefore, it comes down to the requirements of the application and if it is worth the complex implementation, cost, and maintenance.