| Engineering Blog
Behind the marketing website
By Jean-Christophe Wieme, Software Engineer | 2025.01.10 | 9 min read

TL;DR

Our marketing website is built with a thoughtful combination of Nuxt 3, Netlify, and Storyblok, designed to offer a seamless, fast, and SEO-friendly experience. Static generation at build time ensures our pages are lightning-quick, while Netlify’s global CDN guarantees consistent performance no matter where our visitors are. At the heart of our workflow, Storyblok simplifies content management, enabling our team to update pages effortlessly and keep the site dynamic and engaging. Looking ahead, we’re eager to implement Incremental Static Regeneration (ISR) and push the boundaries of performance optimization, ensuring our website continues to deliver a good experience for every visitor.

What’s the Marketing Website?

Our marketing website is not just a digital presence; it’s a vital part of how we connect with and support our customers. It’s where prospects first discover who we are, engage with our content, and take the first steps toward becoming customers.

It serves as a cornerstone of our growth strategy, bringing in organic traffic, boosting conversions, and complementing our outbound efforts. From SEO-optimized content that drives discovery to intuitive CTAs that guide visitors toward action, every aspect is designed to create a seamless, impactful experience. And as a resource that supports our paid campaigns, it maximizes the effectiveness of all our marketing efforts.

To bring this vision to life, we’ve built a robust, scalable tech stack designed to meet our unique needs and adapt as we grow.

What’s Our Stack?

At the heart of our website’s success is a carefully curated tech stack built with Nuxt 3, Netlify, and Storyblok. Together, these tools enable us to deliver a dynamic, performance-driven site that adapts as we grow. Let’s dive into the details.

Nuxt 3 with Static Generation

Nuxt 3, built on Vue.js, powers our site with flexibility, performance, and scalability. Leveraging static generation, all pages are pre-rendered at build time, ensuring lightning-fast load times and reducing dependencies on API calls during browsing. This setup allows us to serve content efficiently via global CDNs (Content Delivery Networks), ensuring seamless access worldwide.

Deep Dive into Nuxt 3 Benefits

  • File-based Routing: Automates route generation based on the folder structure, eliminating manual configuration.

  • Composable Architecture: Modular and reusable composables simplify complex state management tasks.

  • Hybrid Rendering Modes: While we primarily use static generation (SSG), Nuxt 3 supports server-side rendering (SSR) and client-side rendering (CSR) for flexibility.

  • Build-Time Optimizations:

    • Tree-shaking: Removes unused code during bundling.

    • Code-splitting: Splits JavaScript into smaller chunks for faster page loads.

    • Lazy Loading: Automatically loads components and assets only when needed.

    • Automatic Image Optimization: Resizes and compresses images via directives like <nuxt-img>.

Why Static Generation?

Pre-rendering pages at build time creates pure HTML files for each route, distributed across CDNs. This results in:

  • Blazing Fast Load Times: Reducing Time to First Byte (TTFB) and Core Web Vitals metrics.

  • Improved SEO: Search engines crawl fully-rendered pages, boosting discoverability.

  • Resilience: Content is always accessible, even during server downtime.

  • Reduced Attack Surface: Eliminates dynamic server dependencies, lowering security risks.

Here’s an example of our nuxt.config.ts setup:

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  ssr: false,
  experimental: { componentIslands: true, payloadExtraction: true },
  nitro: {
    prerender: { routes: ['/sitemap.xml'] },
  },
  hooks: {
    async 'nitro:config'(nitroConfig) {
      if (!process.argv?.includes('generate')) return;
      const routes = await generateRoutes({ storyblokToken: process.env.STORYBLOK_ACCESS_TOKEN });
      nitroConfig.prerender.routes.push(...routes.prerender);
    },
  },
});

Storyblok for Content Management

Storyblok powers our headless CMS, enabling a seamless blend of developer and content team workflows. With its Visual Editor and modular content blocks, our editors preview changes in real-time, significantly reducing iteration cycles.

Key Features of Storyblok

Storyblok’s headless CMS provides the foundation for managing content with precision and flexibility:

  • API-first Architecture: Content is delivered via a GraphQL API, enabling us to fetch only the data we need for each page. This reduces payload sizes and accelerates rendering times.

  • Real-time Previews: With Storyblok’s live preview feature, content editors can see their changes in context instantly, eliminating the guesswork and accelerating workflows.

  • Modular Content Blocks: We’ve architected reusable, composable components in Storyblok. These components are mapped to Vue.js components in our Nuxt 3 app, ensuring consistency and reducing development overhead.

  • Version Control and Scheduling: Editors can roll back to previous versions of content and schedule updates for future publication. This is particularly useful for time-sensitive campaigns and multilingual content.

For developers, Storyblok’s JSON-based content schema ensures flexibility while maintaining structure. This decoupling of content and presentation is the cornerstone of our scalable, maintainable web architecture. Storyblok Visual Editor

How Storyblok Fits

Our dynamic components leverage Storyblok’s APIs:

  • Dynamic Rendering: JSON content schemas map directly to Vue components.

  • Content Previews: Developers use the /__storyblok preview endpoint for instant live updates.

Example: Fetching content dynamically with Nuxt’s:

const { data: page } = await useAsyncData('page', () => {
  return $fetch(`https://api.storyblok.com/v2/cdn/stories/home`, {
    headers: {
      Authorization: `Bearer ${process.env.STORYBLOK_ACCESS_TOKEN}`,
    },
  });
});

Netlify for Deployment

Netlify is the backbone of our deployment and hosting infrastructure. Here’s a deeper dive into why it’s critical to our workflow:

  • Atomic Deployments: Each build creates an immutable snapshot of the website, ensuring consistent rollbacks when needed. This architecture eliminates deployment drift and guarantees every change is deliberate.

  • Global Edge Network: Content is distributed via a global CDN with edge nodes strategically placed for optimal delivery. This architecture allows us to achieve 95% cache hit rates and sub-50ms latency for static assets.

  • Serverless Functions: Netlify Functions power dynamic capabilities like form submissions, API proxies, and on-demand revalidation. For instance, our “Book a Demo” form integrates directly with a serverless function that validates and routes submissions to our CRM in real time.

  • Deploy Previews: Every pull request generates an isolated preview environment. This feature is invaluable for testing and stakeholder reviews, as it ensures changes are production-ready before merging.

Netlify’s combination of flexibility, automation, and performance-focused features allows us to focus on building and innovating without the overhead of managing infrastructure.

How It Works

Our process is meticulously engineered to ensure the website remains up-to-date, blazing fast, and fully optimized for every visitor:

  • Initiate: Our pipeline begins with triggers such as content updates in Storyblok or pull request merges in Git. These actions instantly kick off a new build process, ensuring that every deployment reflects the most current content and codebase. For example, Storyblok’s webhook integration notifies our CI/CD pipeline, guaranteeing no stale content.

  • Build: Nuxt 3 powers the static generation process, leveraging its robust rendering engine to pre-compile pages, including those with dynamic data fetched at build time. The result? Highly optimized HTML, CSS, and JavaScript bundles ready for lightning-fast delivery. For pages with frequently updated data, we’re working on Incremental Static Regeneration (ISR) to selectively refresh stale content without full rebuilds.

  • Serve: Netlify’s atomic deployments ensure a seamless, zero-downtime experience—even if a build fails, the previous version stays live. With a globally distributed CDN, content is cached at edge nodes closest to users, achieving a sub-200ms Time to First Byte (TTFB) globally.

  • Monitor: We use Amplitude to track and analyze the performance of our website and user interactions. This powerful tool provides us with detailed insights into user behavior, helping us identify bottlenecks and areas for improvement. By integrating Amplitude into our workflow, we continuously monitor key metrics such as load times, user engagement, and conversion rates.

This engineered workflow ensures not only high availability but also a good user experience, with every visitor receiving fast, reliable content delivery.

Bringing It All Together

This combination of Nuxt 3, Netlify, and Storyblok results in:

  • Faster iteration cycles via Git-based workflows and dynamic previews.

  • Optimized performance with lazy-loading, static assets, and fine-tuned CDNs.

  • A secure and scalable architecture, ready for future challenges.

By pushing the boundaries of modern web development, we ensure that our site not only meets but exceeds the expectations of users and search engines alike.

Next Steps

We’re constantly iterating on our stack to push the boundaries of performance and developer experience:

  • Incremental Static Regeneration (ISR): Our goal is to implement ISR using Netlify’s Edge Functions to dynamically revalidate pages on demand. This will cut rebuild times by 70%, ensuring near-instant updates for content-heavy pages.

  • Advanced Asset Optimization: We’re experimenting with Brotli compression for static assets to further reduce payload sizes.

  • Monitoring and Observability: Adding real-time logging and performance monitoring via tools like Datadog and Sentry will help us identify and resolve issues faster, ensuring a robust user experience.

These enhancements will enable us to deliver a cutting-edge web experience while keeping our development process efficient and enjoyable.

By combining Nuxt 3, Storyblok, and Netlify with a forward-thinking approach, we’re building a website architecture that’s not only performant and scalable but also deeply aligned with our users’ needs.

△