Fix TTFB in Vue / Nuxt 3

// pages/products/[slug].vue

<script setup>
// Bad (Vue SPA pattern): fetches in onMounted -- client only, high TTFB
// onMounted(async () => {
//   product.value = await $fetch(`/api/products/${route.params.slug}`);
// });

// Good: useFetch runs on the server during SSR
// The fetched data is serialized into the HTML, hydrated on the client
const route = useRoute();
const { data: product, error } = await useFetch(
  `/api/products/${route.params.slug}`,
  {
    // key prevents re-fetching on client hydration
    key: `product-${route.params.slug}`,
    // server: true is default -- runs during SSR
    // Set a server-side cache to avoid hitting the DB on every request
    getCachedData(key, nuxtApp) {
      return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key];
    },
  }
);

// SEO: set meta from SSR data
useSeoMeta({
  title: product.value?.name,
  description: product.value?.description,
});
</script>

<template>
  <div v-if="product">
    <h1>{{ product.name }}</h1>
    <p>{{ product.description }}</p>
  </div>
  <div v-else-if="error">Failed to load product.</div>
</template>

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      // Pre-render at build time -- zero TTFB (served from CDN)
      '/': { prerender: true },
      '/about': { prerender: true },

      // ISR: re-generate after 60 s, serve stale in the meantime
      '/products/**': { isr: 60 },

      // SWR: serve cached, revalidate in background every 5 min
      '/blog/**': { swr: 300 },

      // API routes: cache at CDN for 10 s, stale for 60 s
      '/api/products/**': {
        headers: {
          'cache-control': 's-maxage=10, stale-while-revalidate=60',
        },
      },

      // Auth routes: never cache
      '/account/**': { cache: false },
    },
  },
});

// Result: /products/* pages are served from edge cache with ~10 ms TTFB
// after the first SSR warms the cache. Subsequent requests skip the server.

// nuxt.config.ts

// Option A: Deploy to Vercel Edge (Vercel Edge Functions / Edge Runtime)
export default defineNuxtConfig({
  nitro: {
    preset: 'vercel-edge',
  },
});

// Option B: Deploy to Cloudflare Pages (Cloudflare Workers)
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages',
  },
});

// Option C: Deploy to AWS Lambda@Edge via Netlify
export default defineNuxtConfig({
  nitro: {
    preset: 'netlify-edge',
  },
});

// The preset is auto-detected when deploying via the provider's CLI.
// Override it manually only when the auto-detection picks the wrong target.

// Verify the build output target:
// $ npx nuxi build
// Nitro build output: .output/server/index.mjs (edge-compatible module)

{
  "headers": [
    {
      "source": "/_nuxt/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/favicon.ico",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=86400" }
      ]
    }
  ]
}

# Equivalent Netlify _headers file:
# /_nuxt/*
#   Cache-Control: public, max-age=31536000, immutable

# Equivalent .htaccess for Apache self-hosting:
# <LocationMatch "^/_nuxt/">
#   Header set Cache-Control "public, max-age=31536000, immutable"
# </LocationMatch>

// nuxt.config.ts -- enable Nitro compression (for self-hosted Node)
export default defineNuxtConfig({
  nitro: {
    compressPublicAssets: {
      brotli: true,  // generate .br files for all public assets
      gzip: true,    // fallback .gz files for clients without Brotli
    },
    // Serve pre-compressed files automatically
    serveStatic: true,
  },
});

// Vercel / Cloudflare Pages: Brotli and HTTP/2 are automatic.
// No configuration is needed -- the platform handles it.

// .htaccess for Apache self-hosting:
// LoadModule brotli_module modules/mod_brotli.so
// <IfModule mod_brotli.c>
//   AddOutputFilterByType BROTLI_COMPRESS text/html text/css
//   AddOutputFilterByType BROTLI_COMPRESS application/javascript
//   AddOutputFilterByType BROTLI_COMPRESS application/json
// </IfModule>

// Verify compression in Chrome DevTools:
// Network tab > HTML document > Response Headers
// content-encoding: br  (Brotli active)
// content-encoding: gzip  (gzip fallback)