Engineering Note

Scaling Nuxt 3 in Production

Lessons learned from migrating a high-traffic e-commerce platform to Nuxt 3. Caching strategies, layer separation, and error handling.

1 min#Nuxt#Architecture#Performance

Scaling Nuxt 3

When moving to Nuxt 3 from a legacy SPA, the biggest challenge wasn't the syntax—it was the mental model shift to hybrid rendering.

The Hybrid Problem

In a traditional SPA, the client does everything. In Nuxt 3, you have to decide: what runs on the server, what runs on the client, and what runs on both.

// The mistake: Thinking this is safe everywhere
const windowWidth = window.innerWidth // Crash on server

We adopted a rigid separation of concerns:

  1. Data Layer: Composables that never touch the DOM.
  2. UI Layer: Components that consume data.
  3. Platform Layer: Plugins that handle environment differences.

Caching Strategy

We used route rules to cache static API responses.

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { swr: 3600 }
  }
})

This reduced our TTFB from 400ms to 20ms for content pages.

← Back to Blog