At my first job when I was in Paris I developed a Single Page Application for the company I was working for. I conducted a perf audit and tried to optimize for the First Paint at the best of my abilities. However I couldn’t go below a certain threshold.
At the time, a fundamental piece was missing in my education: Server Side Rendering (or SSR, as the cool kids call it).
Once upon a time, all the work used to be done on the servers. Take Medium for example, when you first navigate to the homepage, you’re presented with a list of the most recent articles. Then, when you click on an article, the page reloads and there you have the content of the article.
This is how a regular website works. However, ambitious web apps aim to offer a more interactive experience to their users and, when an article is clicked on, an app would simply replace the list of articles with the content of the chosen article, without reloading the page (e.g — the navigation bar doesn’t get re-rendered). Much like the native Android/iOS Medium app, the resulting experience is much more immersive and pleasant. There’s a trade off, though: for this to be possibile, the rendering of the content needs to happen on the client.
What this implies is that the First Paint gets delayed since, in lieu of simply fetching the HTML and rendering it, the app now needs to:
So, how can we get best of both worlds? If you want to both have a blazing fast First Paint and an interactive experience, keep reading.
Let’s see the steps involved for our Medium example:
This piece is part of the #ASKTHEINDUSTRY project, a series of daily conversations with the Web Dev industry. You ask, I’ll answer, or find someone who can.