Rebuilding Our Website with Strapi and Nuxt 

We talk about the importance of page load speeds and best practice web development a lot.

But up until recently, we weren’t really following our own advice.

A legacy CMS, with an outdated tech stack, was in danger of holding us back.

20i is a big, complex website and upgrading the front and back end is a huge undertaking.

But that’s never something that holds us back, so we’ve invested a lot of time and effort in to completely rebuilt it from the ground-up, using Strapi for content management and Nuxt for the frontend. 

This shift was driven by a need for a faster, more scalable, and more efficient solution, giving our users a better experience and streamlining workflows for our internal teams. 

➡️ By moving to a Jamstack architecture, we’ve significantly improved page load speeds, security, and content flexibility, all while maintaining the ability to scale as needed.

In this post, we’ll explain why we chose this stack, how it works, and what it means for our customers. 

Why Strapi + Nuxt? 

Choosing the right technology was essential to meet our goals for performance, scalability, and ease of content management. 

Strapi is a headless CMS that separates content management from delivery.

💡 Strapi is available as a one-click install app with our Node.js hosting.

Nuxt is a Vue-based frontend framework, built for speed, scalability, and seamless integration with headless systems.  

Together, they give us a lightweight, high-performance platform that reflects modern best practices in web development, without the bloat of traditional monolithic CMS platforms. 

By choosing two of the most popular technologies in the Jamstack ecosystem, we’re also staying aligned with current industry standards. 

Content Management Made Easy 

Traditional CMS platforms often combine content management and site delivery, creating bottlenecks and unnecessary overhead. 

Strapi, on the other hand, is a headless CMS, meaning it separates content management from website delivery. 

• Our team can easily create, edit, and manage content through Strapi’s intuitive dashboard without needing development input. 

• Content is delivered via a flexible API, making it easier to push updates across multiple platforms, not just our website. 

• Custom content structures allow us to scale without unnecessary complexity or performance trade-offs. 

With this system in place, marketing and content teams can work independently, updating website pages in real time without waiting on developers to push changes. 

Blazing-Fast Performance 

Speed is a key factor in user experience, engagement, and conversions.  Our new setup leverages Nuxt to generate a static-first site: 

• Pre-rendered pages: Instead of dynamically generating pages on each request, Nuxt builds them ahead of time, so they load almost instantly. 

• Global CDN distribution: All static pages are cached and delivered via our edge CDN nodes, ensuring fast load times no matter where users are located​. 

• Lightweight JavaScript and optimised assets: The combination of Nuxt and server-side optimisations reduces load times significantly. 

• Server efficiency: With fewer backend requests, we reduce downtime risks and increase reliability. 

Being based on Vue, Nuxt also ensures we’re keeping up with modern frontend best practices.

This results in a snappier, more responsive website that delivers content almost instantly, something both our customers and search engines appreciate. 

With these improvements, our website is not only faster and more efficient, but it also ensures that customers always get the best experience, no matter how they access it. 

How the New System Works 

By combining Strapi and Nuxt, we’ve created a website that is faster, more scalable, and easier to manage.  

The headless CMS powers content updates, while the pre-rendered frontend ensures rapid delivery through a globally distributed content network. Here’s how it all fits together: 

Backend with Strapi 

Strapi acts as the content backbone of our website. It allows our team to manage pages, blogs, and resources effortlessly, while developers focus on performance and functionality. 

• API-first: Content is delivered via REST APIs. 

• Flexible content management: Teams can update any part of the site without touching code. 

• Security and scalability: Self-hosted for full control over data and infrastructure. 

By separating content from the frontend, we’ve reduced database queries and backend processing, making our site significantly more responsive and efficient. 

Frontend with Nuxt

Our frontend is built with Nuxt, which is designed for performance and flexibility.

Instead of dynamically generating pages on every request, Nuxt pre-renders them ahead of time, drastically improving load times. 

• Static Site Generation (SSG): Pages are built once and served as static HTML files, eliminating the delay caused by real-time database queries. 

• Efficient Asset Loading: Built-in optimisations like code splitting, lazy loading, and minification ensure that assets are loaded only when necessary. 

With this setup, visitors experience blazing-fast page loads, smooth interactions and uninterrupted browsing. 

Hosting & Deployment

To ensure reliability and speed, our new website is deployed on our own autoscaling cloud platform, supported by our high-performance CDN​. 

• Autoscaling Infrastructure: Our cloud hosting dynamically scales to handle traffic spikes, ensuring zero performance loss​. 

• Global CDN & Edge Caching: Website content is cached across multiple global locations, reducing latency and ensuring fast access for all users​. 

• Continuous Deployment: Updates are automatically deployed through CI/CD pipelines, ensuring the latest content and features are delivered instantly. 

By leveraging autoscaling, caching, and pre-rendering, we’ve built a site that is not only fast and secure but also highly reliable, even under heavy traffic loads. 

Final Thoughts 

Rebuilding our website with Strapi and Nuxt has transformed how we manage, deploy, and maintain our online presence.  

By moving to a headless CMS and a static-first architecture, we’ve eliminated the bottlenecks of traditional setups, allowing for faster content updates, streamlined workflows, and a more efficient development process.