Frontend Performance: React SSR and the Uncanny Valley
Shortly after the page is presented, it doesn't seem to work? Do you have a hard time scrolling and buttons don’t seem to do anything? But if you wait just a bit, a handful of seconds or more, suddenly everything works.
Congratulations, you've entered the Uncanny Valley.
The Uncanny Valley
What you are experiencing is a side effect of server-side rendering (SSR), and is a typical scenario when you do React SSR. If SSR gives us this problem, why do we even do it then? Two big reasons: ecommerce SEO and frontend performance.
It can be measured, roughly, as the time from the page looking ready (Pagespeed Index), and the page becoming interactive (Time To Interactive).
If you want the Uncanny Valley visualized, it looks like this:
The term “Uncanny valley” is a bit too elegant in my ears, and I’m working with a different term myself:
Or just LIE for short.
In essence, a lie is what it really is. The users are presented with a page that for the most part is ready, except for the interactive elements. If they try to use those elements, nothing happens and the users are left with a sense that your web page is not working. And it does not help that we don’t give them any indication of when it IS ready either.
How big of a lie?
Since we have established that we are in fact lying to our users, let’s see for how long time it is. I mean, if it is not for a very long time it’s really not a big problem. Let’s take the website of newnormalgroup.com, which is using Crystallize to fuel its content.
On a medium-range cell phone with a regular 3G connection, the lie is 6.6 seconds. This means that for 6.6 seconds, the user is seeing a layout that is not ready. For instance, you cannot click the menu button at that time.
I would like to encourage you all to always measure frontend performance and get insights on how your web pages perform. When you are presented with the numbers, define your KPI’s and start working on getting better performance and experience for your end-users!