Front-end Overview

Over the past week, I had to research the server-side rendering performance of some of the most popular rendering frameworks. Here is a short extract of it, you can find the full version of it in the main repo of this research, which also includes a complete paper about the given subject.

Abstract

User experience can be altered based on many factors, such as website design, performance, user-friendliness and many more. Users can tolerate bad design or unfriendly interfaces, but if operating every single action takes up to a couple of seconds, users will most likely leave the website. In this paper, we are going to look into just a part of a website’s performance, mainly on the different front-end libraries and their effect on the website. Since Libraries such as React JS and Angular were released many years ago, they had to keep many legacy features such as the virtual DOM, which led them to be much slower than newer solutions such as Solid JS, which doesn’t use such methods. Another drawback of those legacy libraries is the fact that their server-side rendering is astonishingly slow, leading them to render half of the pages which Solid JS can render. But since we are dealing with JavaScript running on the server, the performance can be a deal breaker for many use cases, which leads us to partially render the Web Pages on the website, meaning we don’t render the HTML page on the website, but we embed the needed data for front-end library inside the page, and let it to generate the page on the client, although this method might lead to higher TTI and FCP, it’s a must when we can’t handle that many requests. Such a method is used by YouTube to handle their web pages.

The benchmark results

Read the full version of papaer here.