{"id":15560,"date":"2025-04-03T11:30:24","date_gmt":"2025-04-03T10:30:24","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=15560"},"modified":"2025-12-10T10:23:07","modified_gmt":"2025-12-10T10:23:07","slug":"rebuilding-our-website-with-strapi-and-nuxt","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/rebuilding-our-website-with-strapi-and-nuxt\/","title":{"rendered":"Rebuilding Our Website with Strapi and Nuxt\u00a0"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We talk about the importance of page load speeds and best practice web development a lot.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But up until recently, we weren&#8217;t really following our own advice. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A legacy CMS, with an outdated tech stack, was in danger of holding us back. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">20i is a big, complex website and upgrading the front and back end is a huge undertaking. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But that&#8217;s never something that holds us back, so we&#8217;ve invested a lot of time and effort in to completely rebuilt it from the ground-up, using <strong>Strapi for content management and Nuxt for the frontend<\/strong>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1\ufe0f By moving to a <a href=\"https:\/\/jamstack.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jamstack architecture<\/a>, we&#8217;ve significantly improved page load speeds, security, and content flexibility, all while maintaining the ability to scale as needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we&#8217;ll explain why we chose this stack, how it works, and what it means for our customers.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Strapi + Nuxt?&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Choosing the right technology was essential to meet our goals for performance, scalability, and ease of content management.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/strapi.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Strapi<\/a> is a headless CMS that separates content management from delivery. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1602\" height=\"797\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/03\/screenshot-of-strapi-homepage.png\" alt=\"\" class=\"wp-image-15566\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/03\/screenshot-of-strapi-homepage.png 1602w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-300x149.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-768x382.png.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-1536x764.png.webp 1536w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-400x199.png.webp 400w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-800x398.png.webp 800w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-832x414.png.webp 832w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-1248x621.png.webp 1248w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-strapi-homepage-150x75.png.webp 150w\" sizes=\"auto, (max-width: 1602px) 100vw, 1602px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Strapi is available as a one-click install app with our <a href=\"https:\/\/www.20i.com\/nodejs-hosting\">Node.js hosting<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nuxt is a Vue-based frontend framework, built for speed, scalability, and seamless integration with headless systems.\u00a0\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1349\" height=\"721\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/03\/screenshot-of-nuxt-home-page.png\" alt=\"\" class=\"wp-image-15567\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/03\/screenshot-of-nuxt-home-page.png 1349w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-nuxt-home-page-300x160.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-nuxt-home-page-768x410.png.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-nuxt-home-page-400x214.png.webp 400w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-nuxt-home-page-800x428.png.webp 800w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-nuxt-home-page-832x445.png.webp 832w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-nuxt-home-page-1248x667.png.webp 1248w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2025\/03\/screenshot-of-nuxt-home-page-150x80.png.webp 150w\" sizes=\"auto, (max-width: 1349px) 100vw, 1349px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By choosing two of the most popular technologies in the Jamstack ecosystem, we&#8217;re also staying aligned with current industry standards.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content Management Made Easy&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Traditional CMS platforms often combine content management and site delivery, creating bottlenecks and unnecessary overhead.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Strapi, on the other hand, is a headless CMS, meaning it separates content management from website delivery.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Our team can easily create, edit, and manage content through Strapi\u2019s intuitive dashboard without needing development input.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Content is delivered via a flexible API, making it easier to push updates across multiple platforms, not just our website.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom content structures allow us to scale without unnecessary complexity or performance trade-offs.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Blazing-Fast Performance&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Speed is a key factor in user experience, engagement, and conversions.\u00a0\u00a0Our new setup leverages Nuxt to generate a static-first site:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pre-rendered pages:<\/strong> Instead of dynamically generating pages on each request, Nuxt builds them ahead of time, so they load almost instantly.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global CDN distribution:<\/strong> All static pages are cached and delivered via our edge CDN nodes, ensuring fast load times no matter where users are located\u200b.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lightweight JavaScript and optimised assets:<\/strong> The combination of Nuxt and server-side optimisations reduces load times significantly.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Server efficiency:<\/strong> With fewer backend requests, we reduce downtime risks and increase reliability.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Being based on Vue, Nuxt also ensures we&#8217;re keeping up with modern frontend best practices. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This results in a snappier, more responsive website that delivers content almost instantly, something both our customers and search engines appreciate.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the New System Works&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By combining Strapi and Nuxt, we\u2019ve created a website that is faster, more scalable, and easier to manage.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The headless CMS powers content updates, while the pre-rendered frontend ensures rapid delivery through a globally distributed content network. Here\u2019s how it all fits together:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Backend with Strapi&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>API-first:<\/strong> Content is delivered via <a href=\"https:\/\/www.redhat.com\/en\/topics\/api\/what-is-a-rest-api\" target=\"_blank\" rel=\"noreferrer noopener\">REST APIs<\/a>.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flexible content management:<\/strong> Teams can update any part of the site without touching code.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Security and scalability:<\/strong> Self-hosted for full control over data and infrastructure.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">By separating content from the frontend, we\u2019ve reduced database queries and backend processing, making our site significantly more responsive and efficient.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Frontend with Nuxt<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Our frontend is built with Nuxt, which is designed for performance and flexibility. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of dynamically generating pages on every request, Nuxt pre-renders them ahead of time, drastically improving load times.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Static Site Generation (SSG):<\/strong> Pages are built once and served as static HTML files, eliminating the delay caused by real-time database queries.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Efficient Asset Loading:<\/strong> Built-in optimisations like code splitting, lazy loading, and minification ensure that assets are loaded only when necessary.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">With this setup, visitors experience blazing-fast page loads, smooth interactions and uninterrupted browsing.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hosting &amp; Deployment<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To ensure reliability and speed, our new website is deployed on our own autoscaling cloud platform, supported by our <a href=\"https:\/\/www.20i.com\/cdn\" target=\"_blank\" rel=\"noreferrer noopener\">high-performance CDN\u200b.<\/a>&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Autoscaling Infrastructure:<\/strong> Our cloud hosting dynamically scales to handle traffic spikes, ensuring zero performance loss\u200b.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Global CDN &amp; Edge Caching:<\/strong> Website content is cached across multiple global locations, reducing latency and ensuring fast access for all users\u200b.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Continuous Deployment:<\/strong> Updates are automatically deployed through CI\/CD pipelines, ensuring the latest content and features are delivered instantly.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">By leveraging autoscaling, caching, and pre-rendering, we\u2019ve built a site that is not only fast and secure but also highly reliable, even under heavy traffic loads.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Rebuilding our website with Strapi and Nuxt has transformed how we manage, deploy, and maintain our online presence.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By moving to a headless CMS and a static-first architecture, we\u2019ve eliminated the bottlenecks of traditional setups, allowing for faster content updates, streamlined workflows, and a more efficient development process.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"We talk about the importance of page load speeds and best practice web development a lot. But up&hellip;","protected":false},"author":13,"featured_media":15564,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[46],"tags":[50,81,79],"class_list":["post-15560","post","type-post","status-publish","format-standard","has-post-thumbnail","category-20i","tag-20i","tag-internet","tag-web-development","cs-entry"],"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2025\/03\/CMS-to-Strapi.png","author_info":{"display_name":"Matthew Telfer","author_link":"https:\/\/www.20i.com\/blog\/author\/matthew-telfer\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/15560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=15560"}],"version-history":[{"count":4,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":17883,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/15560\/revisions\/17883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/15564"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}