Comparison: Nuxt 3.10 vs. Next.js 15 for SSR Vue 3.4 Apps with 10k Users

// nuxt-3.10-ssr-page.vue
// Nuxt 3.10 + Vue 3.4 SSR page component with error boundaries and 10k user load simulation

import { ref, onMounted, computed } from 'vue' // Vue 3.4 composition API
import type { User } from '~/types/user' // Local type definition

// Environment-aware config for 10k user scale
const config = useRuntimeConfig()
const USER_BATCH_SIZE = 100 // Fetch 100 users per request to simulate 10k concurrent
const MAX_RETRIES = 3 // Retry failed fetches for production resilience

// Reactive state with Vue 3.4 ref defaults
const users = ref<User[]>([])
const isLoading = ref(false)
const hasError = ref(false)
const errorMessage = ref('')
const currentPage = ref(1)
const totalUsers = ref(10000) // Simulate 10k user dataset

// Computed property for paginated users (Vue 3.4 enhanced computed)
const paginatedUsers = computed(() => {
  const start = (currentPage.value - 1) * USER_BATCH_SIZE
  const end = start + USER_BATCH_SIZE
  return users.value.slice(start, end)
})

// Error handling wrapper for data fetching
const fetchUsers = async (page: number) => {
  isLoading.value = true
  hasError.value = false
  errorMessage.value = ''

  let retries = 0
  while (retries < MAX_RETRIES) {
    try {
      // Nuxt 3.10 useFetch with SSR support and caching
      const { data, error } = await useFetch<User[]>(`/api/users`, {
        query: { page, limit: USER_BATCH_SIZE },
        headers: { 'X-Scale-Simulation': '10k-users' },
        retry: 1 // Built-in retry for transient failures
      })

      if (error.value) {
        throw new Error(`API error: ${error.value.statusMessage || 'Unknown error'}`)
      }

      users.value = data.value || []
      isLoading.value = false
      return
    } catch (err) {
      retries++
      if (retries === MAX_RETRIES) {
        hasError.value = true
        errorMessage.value = `Failed to load users after ${MAX_RETRIES} retries: ${err instanceof Error ? err.message : 'Unknown error'}`
        isLoading.value = false
        // Log to Nuxt 3.10's built-in error tracking
        useErrorLogger().logError(err instanceof Error ? err : new Error(String(err)))
      }
      // Exponential backoff for retries
      await new Promise(resolve => setTimeout(resolve, 2 ** retries * 100))
    }
  }
}

// Initialize data on mount (SSR will pre-fetch via useFetch)
onMounted(() => {
  fetchUsers(currentPage.value)
})

// Page change handler with debounce for 10k user traffic
const changePage = (newPage: number) => {
  if (newPage < 1 || newPage > Math.ceil(totalUsers.value / USER_BATCH_SIZE)) return
  currentPage.value = newPage
  fetchUsers(newPage)
}





/* Nuxt 3.10 scoped styles with Vue 3.4 enhanced CSS bindings */
.user-dashboard { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.loading-spinner { text-align: center; padding: 2rem; font-size: 1.2rem; }
.error-alert { background: #fee2e2; padding: 1rem; border-radius: 8px; margin: 1rem 0; }
.retry-btn { margin-left: 1rem; padding: 0.5rem 1rem; background: #dc2626; color: white; border: none; border-radius: 4px; }
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0; }
.user-card { border: 1px solid #e5e7eb; padding: 1rem; border-radius: 8px; }
.badge-active { background: #d1fae5; color: #065f46; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
.badge-inactive { background: #f3f4f6; color: #6b7280; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
.pagination { display: flex; justify-content: center; gap: 1rem; align-items: center; margin-top: 2rem; }
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }

// next-15-vue-34-ssr-server.ts
// Next.js 15 custom server for Vue 3.4 SSR with 10k user simulation
import next from 'next'
import { createServer } from 'http'
import { renderToString } from '@vue/server-renderer' // Vue 3.4 SSR renderer
import { createApp } from 'vue' // Vue 3.4 core
import App from './App.vue' // Root Vue 3.4 component
import type { IncomingMessage, ServerResponse } from 'http'

// Next.js 15 app initialization with Vue 3.4 support flag
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev, dir: __dirname, customServer: true })
const handle = app.getRequestHandler()

// Configuration for 10k concurrent user simulation
const PORT = parseInt(process.env.PORT || '3000', 10)
const USER_BATCH_SIZE = 100
const MAX_CONCURRENT_REQUESTS = 10000
let activeRequests = 0
const requestQueue: Array<(value: void) => void> = []

// Rate limiter for 10k user load
const acquireSlot = () => {
  return new Promise((resolve) => {
    if (activeRequests < MAX_CONCURRENT_REQUESTS) {
      activeRequests++
      resolve()
    } else {
      requestQueue.push(resolve)
    }
  })
}

const releaseSlot = () => {
  activeRequests--
  if (requestQueue.length > 0) {
    const nextResolve = requestQueue.shift()
    if (nextResolve) {
      activeRequests++
      nextResolve()
    }
  }
}

// Error handling middleware for Vue 3.4 SSR failures
const handleSSRError = (err: Error, res: ServerResponse) => {
  console.error('Vue 3.4 SSR Error:', err)
  res.statusCode = 500
  res.setHeader('Content-Type', 'text/html')
  res.end(`




        Failed to render page
        ${err.message}
        Retry


  `)
}

// Initialize Next.js 15 and start custom server
app.prepare().then(() => {
  createServer(async (req: IncomingMessage, res: ServerResponse) => {
    try {
      // Rate limit requests for 10k user simulation
      await acquireSlot()

      const url = new URL(req.url || '/', `http://${req.headers.host}`)

      // Serve Vue 3.4 SSR pages for /vue/* routes
      if (url.pathname.startsWith('/vue/')) {
        try {
          // Create Vue 3.4 app instance per request (isomorphic)
          const vueApp = createApp(App, {
            userAgent: req.headers['user-agent'],
            requestUrl: url.pathname
          })

          // Render Vue 3.4 component to string (SSR)
          const vueHtml = await renderToString(vueApp)

          // Inject into Next.js 15 HTML shell
          const nextHtml = await app.renderToHTML(req, res, url.pathname, {})
          const finalHtml = nextHtml?.replace('', vueHtml) || ''
          res.statusCode = 200
          res.setHeader('Content-Type', 'text/html')
          res.end(finalHtml)
        } catch (ssrErr) {
          handleSSRError(ssrErr instanceof Error ? ssrErr : new Error(String(ssrErr)), res)
        } finally {
          releaseSlot()
        }
      } else {
        // Delegate non-Vue routes to Next.js 15 default handler
        await handle(req, res)
      }
    } catch (err) {
      console.error('Request Error:', err)
      res.statusCode = 500
      res.end('Internal Server Error')
    }
  }).listen(PORT, () => {
    console.log(`Next.js 15 + Vue 3.4 SSR server running on http://localhost:${PORT}`)
    console.log(`Simulating up to ${MAX_CONCURRENT_REQUESTS} concurrent users`)
  })
})

// Graceful shutdown for production
process.on('SIGTERM', () => {
  console.log('SIGTERM received, shutting down gracefully')
  process.exit(0)
})

process.on('SIGINT', () => {
  console.log('SIGINT received, shutting down gracefully')
  process.exit(0)
})

// benchmark-ssr-10k-users.js
// Benchmark script comparing Nuxt 3.10 vs Next.js 15 for SSR Vue 3.4 apps
import autocannon from 'autocannon'
import { spawn } from 'child_process'
import { writeFileSync } from 'fs'
import { join } from 'path'

// Benchmark configuration for 10k concurrent users
const BENCHMARK_DURATION = 60 // seconds per test
const CONCURRENT_CONNECTIONS = 10000 // Simulate 10k users
const PIPELINING = 1 // Disable HTTP pipelining for realistic results
const REQUEST_TIMEOUT = 30000 // 30s timeout per request
const OUTPUT_DIR = './benchmark-results'
const HARDWARE_SPECS = '4vCPU, 8GB RAM, AWS t3.xlarge, Node.js 20.11.0'

// Framework configs: Nuxt 3.10 and Next.js 15 with Vue 3.4
const frameworks = [
  {
    name: 'Nuxt 3.10 + Vue 3.4',
    startCommand: ['npx', 'nuxi', 'dev', '--port', '3001'],
    url: 'http://localhost:3001/ssr-dashboard',
    version: '3.10.0',
    nodeVersion: '20.11.0'
  },
  {
    name: 'Next.js 15 + Vue 3.4',
    startCommand: ['npx', 'next', 'dev', '-p', '3002'],
    url: 'http://localhost:3002/vue/dashboard',
    version: '15.0.0-canary.12',
    nodeVersion: '20.11.0'
  }
]

// Helper to start framework server and wait for readiness
const startServer = (command: string[], port: number): Promise<{ process: any, stop: () => void }> => {
  return new Promise((resolve, reject) => {
    const proc = spawn(command[0], command.slice(1), {
      env: { ...process.env, NODE_ENV: 'production', PORT: String(port) },
      stdio: 'pipe'
    })

    let isReady = false
    const timeout = setTimeout(() => {
      if (!isReady) {
        proc.kill()
        reject(new Error(`Server failed to start on port ${port} within 30s`))
      }
    }, 30000)

    proc.stdout.on('data', (data: Buffer) => {
      const output = data.toString()
      if (output.includes('ready') || output.includes('started')) {
        isReady = true
        clearTimeout(timeout)
        resolve({
          process: proc,
          stop: () => {
            proc.kill()
            proc.removeAllListeners()
          }
        })
      }
    })

    proc.stderr.on('data', (data: Buffer) => {
      const error = data.toString()
      if (error.includes('EADDRINUSE')) {
        reject(new Error(`Port ${port} already in use`))
      }
    })

    proc.on('error', (err) => {
      clearTimeout(timeout)
      reject(err)
    })
  })
}

// Run benchmark for a single framework
const runBenchmark = async (framework: typeof frameworks[0]) => {
  console.log(`Starting benchmark for ${framework.name}...`)
  let server
  try {
    server = await startServer(framework.startCommand, parseInt(framework.url.split(':')[2]))
    console.log(`${framework.name} server ready, starting load test...`)

    const result = await autocannon({
      url: framework.url,
      connections: CONCURRENT_CONNECTIONS,
      duration: BENCHMARK_DURATION,
      pipelining: PIPELINING,
      timeout: REQUEST_TIMEOUT,
      headers: {
        'User-Agent': 'BenchmarkBot/1.0',
        'Accept': 'text/html'
      }
    })

    // Process results
    const processed = {
      framework: framework.name,
      version: framework.version,
      hardware: HARDWARE_SPECS,
      timestamp: new Date().toISOString(),
      requests: {
        total: result.requests.total,
        avgPerSecond: result.requests.average,
        p50: result.latency.p50,
        p99: result.latency.p99,
        max: result.latency.max
      },
      latency: {
        min: result.latency.min,
        mean: result.latency.mean,
        stddev: result.latency.stddev
      },
      throughput: {
        bytes: result.throughput.total,
        avgPerSecond: result.throughput.average
      },
      errors: result.errors,
      timeouts: result.timeouts
    }

    // Save results to file
    const fileName = join(OUTPUT_DIR, `${framework.name.replace(/[^a-zA-Z0-9]/g, '-')}-${Date.now()}.json`)
    writeFileSync(fileName, JSON.stringify(processed, null, 2))
    console.log(`Results saved to ${fileName}`)
    return processed
  } catch (err) {
    console.error(`Benchmark failed for ${framework.name}:`, err)
    throw err
  } finally {
    if (server) server.stop()
  }
}

// Main benchmark runner
const main = async () => {
  console.log(`Starting SSR benchmark for 10k concurrent users`)
  console.log(`Hardware: ${HARDWARE_SPECS}`)
  console.log(`Test duration: ${BENCHMARK_DURATION}s per framework`)

  const results = []
  for (const framework of frameworks) {
    try {
      const result = await runBenchmark(framework)
      results.push(result)
    } catch (err) {
      console.error(`Skipping ${framework.name} due to error:`, err)
    }
  }

  // Generate comparison report
  if (results.length === 2) {
    const nuxtResult = results.find(r => r.framework.includes('Nuxt'))
    const nextResult = results.find(r => r.framework.includes('Next'))

    if (nuxtResult && nextResult) {
      const comparison = {
        timestamp: new Date().toISOString(),
        hardware: HARDWARE_SPECS,
        metrics: {
          nuxt: {
            p99Latency: nuxtResult.requests.p99,
            avgRps: nuxtResult.requests.avgPerSecond,
            errorRate: (nuxtResult.errors / nuxtResult.requests.total) * 100
          },
          next: {
            p99Latency: nextResult.requests.p99,
            avgRps: nextResult.requests.avgPerSecond,
            errorRate: (nextResult.errors / nextResult.requests.total) * 100
          },
          difference: {
            p99LatencyDelta: ((nextResult.requests.p99 - nuxtResult.requests.p99) / nuxtResult.requests.p99) * 100,
            rpsDelta: ((nuxtResult.requests.avgPerSecond - nextResult.requests.avgPerSecond) / nextResult.requests.avgPerSecond) * 100
          }
        }
      }

      const reportPath = join(OUTPUT_DIR, `comparison-report-${Date.now()}.json`)
      writeFileSync(reportPath, JSON.stringify(comparison, null, 2))
      console.log(`Comparison report saved to ${reportPath}`)
      console.log(`Nuxt 3.10 p99 latency: ${nuxtResult.requests.p99}ms`)
      console.log(`Next.js 15 p99 latency: ${nextResult.requests.p99}ms`)
      console.log(`Delta: ${comparison.metrics.difference.p99LatencyDelta.toFixed(2)}%`)
    }
  }
}

// Run main and handle errors
main().catch(err => {
  console.error('Benchmark suite failed:', err)
  process.exit(1)
})

// Optimized useFetch for 10k user scale
const { data: users, error } = await useFetch('/api/users', {
  query: { page: currentPage.value },
  key: `users-${currentPage.value}`, // Explicit cache key
  cache: 'stale-while-revalidate', // Nuxt 3.10 caching
  retry: 2, // Retry transient failures
  timeout: 5000 // 5s timeout per request
})

// Rate limiting middleware for Next.js 15 Vue 3.4 SSR
import rateLimit from 'express-rate-limit'
import RedisStore from 'rate-limit-redis'

const limiter = rateLimit({
  store: new RedisStore({
    sendCommand: (...args: string[]) => redisClient.sendCommand(args),
  }),
  windowMs: 60 * 1000, // 1 minute window
  max: 70, // 70 requests per minute per IP (Next.js 15)
  message: 'Too many requests, please try again later.'
})

app.use('/vue/*', limiter)

// Nuxt 3.10 OpenTelemetry setup
export default defineNuxtConfig({
  modules: ['@opentelemetry/nuxt'],
  opentelemetry: {
    serviceName: 'nuxt-3.10-ssr-vue-34',
    exporter: {
      type: 'prometheus',
      port: 9464
    },
    instrumentations: ['@opentelemetry/instrumentation-fetch']
  }
})