Faster applications are more fun to use
We built our previous game with a Client-Side-Rendering approach, better known as a Singe Page Application or SPA. So how does that work? After entering the URL, the server will return an empty HTML file. Your browser will load and execute the JavaScript on that file and when that has finished, you’ll get a viewable and interactable application. Before that’s finished, you’ll get a blank screen, so if you’re on a slower device, like a mobile phone, that time will be longer than on your high-speed laptop.
With Next.js, you can enable Server-Side-Rendering or SSR, which means that after entering the URL, the server will pre-render that page before returning it to the browser. Your browser can instantly show that content, making the application immediately viewable, while in the background, downloading and executing JavaScript to make it interactable. These are essential milliseconds (or even seconds) on that (first) page load, making your users less eager to bounce.
Bringing in the right tools
When building applications, satisfying your users and giving them the best UX you can possibly create should be your primary goal. However, make sure you don’t forget your development team! If you’re using outdated tools or tools that require a lot of boilerplate code over and over again, not only does your development time increase, but it can also have a disastrous impact on your teams’ satisfaction level.
At Codit, we always try to bring in the right tools — tools that solve the problem the customer is facing, but also those that make our developer life a bit easier. Next.js, for example, brings in some much-needed standardization and comes packed with a bunch of tools to improve the performance of your application. Aside from Next.js, we also brought in Next-Auth to handle authentication, React-Query for async state management, auto-generated API adapter layers, and a lot more.
Combining our toolset with the automated pipelines, as mentioned in our previous post, we achieved a great developer experience — even for a side project. This allowed us to easily update and deploy features, even during the tournament, without any hiccups or worries.
The end is near
As the tournament is almost over, we can look back on another success story. While the main look and feel of the application didn’t change that much from our previous UEFA game, we did bring in a lot of improvements across all domains. We introduced new features (for example, getting to know how the AI bots scored is now just a click away) and opened it up to our customers by implementing Azure Active Directory B2C.
We’ve learned a lot and gained experience and ideas for the future. But first and foremost, let’s enjoy the upcoming and final games.
Good luck to the Codit countries still in the tournament! ⚽️
Subscribe to our RSS feed