Building our lightning fast tracking page using Next.js

At HIVED, we have dedicated tech resource entirely devoted to building out our customer experience journey to make it the most sophisticated and modern in the market. One of our immediate priorities? Replatforming our tracking page. In our first tech-focused blog, in tandem with the launch of our new Customer Experience Squad, I am excited to share the updates that will set our tracking page apart with the goal of customer-satisfaction that goes the extra mile.

The need for speed

At HIVED, our goal is to elevate the delivery experience for end recipients receiving parcels. When a parcel is out for delivery, our system provides recipients with a step-by-step overview of its journey, including where the parcel has been and where it’s headed. All of this information lives on our tracking page.

The majority of users view the HIVED tracking page on mobile devices. This means the tracking page may often be loaded on 3G/4G connections or through low-powered devices. Whilst a page may load instantly on WiFi, it may be unbearably slow in these conditions. Slow speeds ultimately mean frustration, bounces and less usage, anytime our tracking page was accessed this way. We set out to fix this.

The tech we chose: Next.js with SSR

At HIVED, we set out to deliver the fastest possible tracking experience and to do this, we chose Next.js with Server Side Rendering (SSR). 

With our current use of Client Side Rendering (CSR), recipient’s browsers were required to download and execute a large bundle of Javascript, fetch the data, and only then render the page. On mobile internet connections, this process can result in painfully slow loading times. 

In contrast, by using SSR, our React code is rendered on the server, where it fetches the required data and sends a fully rendered HTML page to the client’s browser. This significantly reduces data transfer and eliminates the need for javascript execution on the client’s device for the initial render of the page.

The result? A tracking page that loads blazing fast, even on slow connections.

Layout shifts

Beyond a fast page, we wanted to provide recipients with a great UX experience. In order to do this, we removed layout shifts. This is when elements jump around, as various parts of the page are loaded, such as images and fetched data.

• With CSR, layout shifts can happen, as a loading state is needed whilst data is fetched from an API. And it can often be impossible to predict the exact size of an element before it’s loaded.
• With SSR, the data is fetched on the server, and rendered before being sent to the client, meaning no loading state is needed, and layout shifts can be avoided.

With SSR, some elements, like images, will still load asynchronously. Property sized placeholders are needed, so when the real image loads, everything stays where it should be. On our tracking page, we do this for delivery photos.

It wasn’t all easy

This was the first time we had used SSR at HIVED and discovered some challenges along the way. One of them was hydration errors. 

With SSR, it is imperative that the page rendered by the server is exactly the same as the page rendered by the client.

Timestamps can cause some issues with this, as Javascript’s Date object is heavily dependent on the user’s local timezone and settings.

An example of this would be the 12 vs 24 hour clock. Some locales would use a 12-hour clock, but others use a 24-hour clock. This leads to a problem if the server renders 9pm as `21:00`, but the client then attempts to render it as `9:00pm`. We used a library called date-fns, to handle formatting in a consistent way, ensuring that the server and client always match.

—

This project is just the first of many for improving our frontend stack. Stay tuned to our blog to keep up-to-date with all the improvements and tech updates coming up or follow along with HIVED on our Linkedin or on Instagram and TikTok @hivedhq.

If you love solving real-world problems, performance challenges, and delighting users - we’re hiring 🚀 You can check out our open roles here!

‍