How to achieve the UX of an SPA with the SEO of static HTML

Developers and designers love Single Page Applications (SPAs). With an SPA we can give life to beautiful, interactive, fast, and smooth applications that behave with graceful intelligence.

Developers use SPAs to achieve a clean architecture where the frontend logic is kept neatly separated from the backend, which needs to be kept simple, secure, and fast. And we already know that modern digital platforms are supposed to be headless anyway in order to power multi-channel experiences through APIs such as OData, so that native apps, web interfaces, and in some cases even desktop apps all interact with the same data in realtime.

What's not to love? Well, there's a tradeoff. SPAs come with some technical challenges around SEO scores. In particular, an SPA requires downloading a big JavaScript file first, then it needs to run its own rendering logic, then it needs to call some APIs to the headless CMS, and then it can actually put HTML on the screen. This results in quite a delay, and even some jumping around of the content (the infamous "cumulative layout shifting") as the HTML is submitted bit by bit to the browser. Google and other search engines (ok, we usually only care about Google to be honest) will penalize websites that behave like this, potentially resulting in lower ranking and in some extreme cases even lost conversions.

Fortunately, it is possible to combine the technical and UX wonders of SPAs with excellent SEO scores. This can be achieved via Server Side Caching (SSC), a variation of server side rendering.

SSC works as follows. Whenever a CMS page is updated, the CMS sends a signal to the middleware that causes the page to be rendered, and its raw HTML to be stored in a fast storage such as Elastic Search. When the page is requested, we use the cached HTML (which is in fact the latest version known to the system, so fully up to date) as the initial content of the response. The SPA then starts up and takes over, and while the whole process takes about one or two seconds in the worst case, the user gets to see some relevant content immediately, before the SPA takes over and brings the content to life. Extra tricks such as loading other JavaScript files at a second time, inlining CSS, or using placeholder SVG images while loading can further reduce the time it takes for a page to be shown with the right text and layout.

The results are excellent: not only are the SEO scores much higher, but the technical and UX advantages remain untouched. This way we get the best online marketing results, while keeping users happy, and development costs low within an excellent modern technical architecture.

If you want to know more about the applicability of our SSC technology to SEO scores within a modern SPA for a multi-channel platform, drop me a line at [email protected] or contact me via LinkedIn, I am always more than happy to help!