Why the combination of SPA and SSG worked best for Ekstraklasa?

In today’s digital age, website performance is key. Slow loading speeds and clunky interfaces can make or break a website’s success, and businesses are constantly seeking new solutions to improve user experience and engagement.

Three popular solutions that are often discussed in this context are Single-Page Applications, Server-Side Rendering, and Static Site Generators.

In this article, we will:

1. Compare and contrast these three solutions,
2. Demonstrate examples of them
3. Talk about the combination of a Single-Page Application & Static Site Generator as the best solution for optimising the Ekstraklasa website.

The following article is written in collaboration with TISA Group’s Lead Frontend Developer – Maciej Górski – who provided insight into the topic and the case of the Ekstraklasa website.

What is a Single-Page Application (SPA)?

A Single-Page Application, or SPA, is a web application that dynamically updates content on a single webpage, without requiring a full page reload. SPAs use JavaScript to fetch data from APIs and dynamically update the content of the page in response to user actions, providing a seamless and fluid user experience.

One of the key advantages of SPAs is that they can provide a highly interactive user experience without requiring a lot of data to be transferred from the server to the client in response to every user action. This makes them well-suited for applications that require real-time updates, such as chat applications or social media platforms. In fact, SPAs are the go-to way of creating modern, dynamic web applications.

However, SPAs are not without their drawbacks. The first big one is that they can be slower to load initially, as the entire application needs to be loaded onto the client-side before it can be used. This can be a major problem for websites that require a lot of content or functionality, and can lead to high bounce rates and frustrated users. The other problem is that SPAs don’t do so well when it comes to SEO and crawlers, such as the crawlers that create previews for social media when sharing your content.

UMPIRE Case Study – use of SPA

One of our examples of the use of SPA is TISA’s product, UMPIRE. It is an integrated content management system that helps to enhance your business’s communication across all digital platforms, boost fan engagement, and build a loyal community.

The UMPIRE application is designed as a Single-Page Application due to its nature as a tool for business use, rather than a content-heavy website. The application is intended solely for authorised users, and its extensive features can be easily loaded onto the client-side all at once. In UMPIRE’s case, we can take full advantage of the benefits of SPAs and we don’t need to deal with the above-mentioned drawbacks, since UMPIRE shouldn’t be indexed by search engines or shared on social media.

What is Server-Side Rendering (SSR)?

Server-Side Rendering, or SSR, is a technique for rendering web pages on the server-side and sending a fully-rendered view to the client. The advantage of SSR is that it can significantly reduce the initial loading time of a web page, as the requested content is fully rendered on the server-side before it is sent to the client. This means that users can see the content of the page much more quickly than they would with an SPA. SSR can also improve SEO, as search engine crawlers can easily index fully-rendered pages.

However, one of the drawbacks of SSR is that it can be more complex to manage than SPAs, and can require additional server-side resources, which usually ends up being more costly.

What is a Static Site Generator (SSG)?

A Static Site Generator, or SSG, is a tool that generates a static HTML file for each page of a website based on templates and content. The generated files can be served directly to clients, without requiring any server-side processing. SSGs are becoming increasingly popular for their ease of use, scalability, and speed.

The key advantage of SSGs is their speed. Static sites load extremely quickly, as they require no server-side processing and need no database queries or server-side rendering for the initial load. This makes them ideal for websites that require fast loading times and a highly performant user experience.

Additionally, static sites are highly scalable, as they can be cached at multiple levels, making them resilient to traffic spikes.

Another advantage of SSGs is their simplicity. Since they require no server-side processing, they can be hosted on any server or content delivery network (CDN), making them highly portable and easy to deploy. Moreover, SSGs can improve security, as depending on the use case, there might not even be a backend server to exploit.

However, one of the main drawbacks of SSGs is that they are less dynamic than SPAs or SSR. Since they are generated statically, they cannot be updated in real-time, and require regeneration each time a change is made to the content or design of the website. This can be time-consuming for larger websites and may require additional development resources.

Comparing and Contrasting the Solutions

To compare and contrast these three solutions, let’s take a closer look at some key factors: development complexity, initial loading speed, SEO, and scalability.

Development and Infrastructure Complexity

In terms of development complexity, SPAs can be more straightforward than SSRs or SSGs, as they require only client-side code and a simple server to host the application bundle. SSR usually requires a more complex server that will generate views for each user request. This makes SSR less straightforward and more costly to deploy and maintain in a manner that will be able to handle large volumes of incoming traffic.

The complexity of SSG varies on a case-by-case basis. They can be as easy (or easier) than SPAs, especially when the website includes no dynamic content. In such a case, one might never even need to deploy a production-ready API!  

Initial Loading Speed

When it comes to initial loading speed, SSGs are the clear winner. Since they are delivered as static HTML files, the users can be served content with no server-side processing, database queries, or server-side rendering.

SPAs can be slow to load initially, as a large part of the application needs to be loaded onto the client-side before it can be used. In comparison with SPAs, SSR can reduce initial loading time, but still requires server-side processing to render the page.

SPAs and SSG applications can easily benefit from CDNs, meaning the user gets served from their local edge, which makes load times much faster globally.

SEO

When it comes to SEO, SSR and SSGs are both advantageous, as they both provide fully-rendered pages that can be easily indexed by search engines. SPAs, on the other hand, can be more difficult for search engines to crawl, as they rely heavily on JavaScript and may not provide a complete snapshot of the page.

Scalability

In terms of scalability, SSGs are the winner. They can be easily cached at multiple levels, making them highly resilient to traffic spikes. Static sites that require no production backend service have no bottlenecks in serving as many users as required. SPAs are also quite easy to scale, but usually, there is a bottleneck in the form of the backend API service.

Why was the combination of SPA and SSG the Best Solution for Ekstraklasa?

Ekstraklasa’s portal is based on the Single Page Application method. This method was the natural choice since we need to display large amounts of dynamically generated data, including real-time statistics and events occurring during a live match in our match centre.

The solution was, however, not without issues. A SPA runs in the browser and requests necessary content directly from the API. Search engines and social media platforms aren’t very compatible with this approach. They expect all of the content to be delivered right out of the gate, and they don’t stay on your page like real users and don’t wait for the content that is being added constantly and incrementally. They’re left with a semi-blank page that needs to be filled, but they have no way of realising that.

This means that when you share a post on Facebook with some content from an SPA Ekstraklasa website, the page’s subtitle, thumbnail image, or meta description will not be displayed. Such a solution massively reduces the SEO ranking of websites in search engines.

Server Side Rendering was one possible solution to this problem. Unfortunately, this is a more expensive approach that would necessitate the use of numerous servers to reduce the time it takes for each page to load. All around, it just wasn’t the best (and the fastest) we could do!

So how does Ekstraklasa work? 

When a user visits the website, they are first served with a statically generated version of the page they are looking for. This static generation takes place on our servers every time there is new content from UMPIRE that needs to be displayed, such as new news articles.

After the user is served with the static version, we request a full dynamic SPA in the background. When the SPA is downloaded and initialised, we seamlessly switch the static site with the dynamic SPA, without the user ever realising that.

This allows us to enjoy the benefits of both SSG and SPA without suffering from their downsides. Our users are served content as quickly as technically possible, but we are still able to provide them with all the dynamic data that we want.

Search engines and social media platforms are also served right from the start with everything they need. This boosts our SEO performance and allows for previews in social media posts, resulting in higher engagement.

This approach also made it possible to make use of global CDNs, so our page will render just as fast for users from every continent! 

Conclusion

In conclusion, Single-Page Applications, Server-Side Rendering, and Static Site Generators are all popular solutions for improving website performance and user experience. While each solution has its advantages and disadvantages, we believe that our combined approach was the best solution for optimising website loading speed. Its simplicity, speed, and scalability, all without compromising on the dynamic content, make it the ideal solution for many modern website use cases.

We would like to thank Maciej Górski for providing his contribution to this article. His knowledge and expertise were essential in the creation of this text! Thank you!

***

Are you looking for more information about digital transformation in your industry? Visit our website to learn more about dedicated products and innovations designed for you. To find out more about how TISA can help your organisation thrive in the digital world, contact us directly – we will be happy to talk about your case. And if you’d like to join our team and help us create the best digital solutions for the world of sports, esports and entertainment, check out our current career opportunities.