Modern Nuxt 4 Architecture: Mastering SSG, Inlined Payloads, and Zero-JS Falls

Nuxt 4 introduces a modern directory layout, improved Nitro bundlers, and significantly reduced bundle sizes. However, extracting maximum performance in production requires careful attention to payload hydration and static prerendering.

Here are the critical techniques we use to achieve near-instant initial loads:

1. Inline Payloads vs. External Extraction

By default, static builds often attempt to extract page data into external JSON files. On high-latency mobile networks or restrictive CDN environments, this adds unnecessary network roundtrips.

By configuring experimental: { payloadExtraction: false }, Nuxt serializes page data directly into the pre-rendered HTML. When the visitor lands on any page, the data is immediately accessible in the DOM:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    payloadExtraction: false
  },
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/']
    }
  }
})

2. On-Demand Lazy Initialization of Heavy Modules

Features like in-browser SQLite search or full-text indexing shouldn't block the initial page render. Deferring queries until user interaction (such as pressing Cmd + K) eliminates hundreds of kilobytes from the initial bundle:

const { data: searchIndex, execute: loadSearch } = useLazyAsyncData(
  'search',
  () => queryCollectionSearchSections('blog'),
  { server: false, immediate: false }
)

3. Smooth Hardware-Accelerated Scrolling with Lenis

Combining Nuxt 4 with modern motion libraries like Lenis delivers an app-like experience on desktop while respecting native gestures on touch devices. Disabling virtual scroll for coarse pointers ensures mobile momentum scrolling remains completely native.

With these optimizations in place, websites achieve sub-50ms TTFB and perfect 100 Lighthouse scores across the board.