Faster React TTI by Replacing Apollo with Urql
Having a fast API for your ecommerce is a vital backbone of the infrastructure. It ensures that the performance bottleneck is not the data provider, and leaves you to dedicate focus to other important arenas; such as frontend performance. Important topics to consider on frontend performance are page speed index and time to interactive. We replaced the Apollo GraphQL client library with Urql and saw significant performance improvements.
Reducing Time To Interactive (TTI)
We have done a blog post on the relative difference between page speed index and time to interactive, the uncanny valley, which is a very critical time for any website and is really important if you are doing an ambitious ecommerce. In the article, we highlighted what this effect is, and how to measure it. Let’s dive into one more way of optimizing.
When doing a React application, it is quite easy to get into a situation where the client js bundle gets quite big, which tends to be difficult to pick up when you are deep in implementing new features on a tight timeline. This might lead to huge js bundles that get shipped to the users, something that can have a massive effect on mid-and-low end devices.
To put it simply: the more work you give the browser, the worse TTI you will get. And as TTI gets worse, the end-users (and your business) are starting to suffer.
Our partner Formidable has made a lightweight alternative to Apollo, Urql, which I wanted to try out. It is smaller in bytes and still promises great performance.I deployed the boilerplate on Now V2, and did 5 tests with the latest version of Apollo and another 5 with Urql.
The average TTI with Apollo: 3.86 seconds
The average TTI with Urql: 3.50 seconds
TTI improvement: 360 ms
URQL is Simply Faster than Apollo