Nuxt 4 & Nitro

21. Nuxt 4 Architecture, Nitro Hooks & useAsyncData

Architect applications with Nuxt 4 forward-compatible directory layout, universal data fetching lifecycle with caching, and Nitro server extensions.

nuxt4-data.ts

// Nuxt 4 Forward-Compatible app/ & Universal Data Fetching
export default defineNuxtComponent({
  async setup() {
    // 1. useAsyncData with key-based deduplication & SSR hydration transfer
    const { data: telemetry, status, refresh } = await useAsyncData(
      'node-telemetry',
      () => $fetch('/api/v1/metrics'),
      { lazy: false, server: true }
    );

    return { telemetry, status, refresh };
  }
});

Nuxt 4 Architecture, Nitro Hooks & useAsyncData

Nuxt 4 introduces a forward-compatible directory layout with app/, universal caching via useAsyncData and useFetch, and deep Nitro server integration.

Universal Data Fetching (useAsyncData): Prevents double-fetching during client hydration by serializing server-fetched data in the SSR payload.
Deduplication Keys: Key-based cache management ensures multiple components requesting the same key share a single network request.
Server Routes (server/api/): Backed by Nitro with automatic HMR, typed endpoints, and cross-platform multi-runtime presets.