Nuxt 3 SSR & Deployment

# Nuxt 3 SSR & Deployment for Google Antigravity

Master Nuxt 3 server-side rendering and deployment strategies in your Google Antigravity projects. This guide covers SSR optimization, hybrid rendering, and production deployment patterns.

## Nuxt 3 Configuration

Set up optimized Nuxt 3 configuration:

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  // Enable SSR
  ssr: true,
  
  // Runtime config
  runtimeConfig: {
    // Private keys (server-only)
    apiSecret: process.env.API_SECRET,
    databaseUrl: process.env.DATABASE_URL,
    
    // Public keys (exposed to client)
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || "https://api.example.com",
      appUrl: process.env.NUXT_PUBLIC_APP_URL || "https://example.com",
    },
  },
  
  // App configuration
  app: {
    head: {
      charset: "utf-8",
      viewport: "width=device-width, initial-scale=1",
      title: "My Nuxt App",
      meta: [
        { name: "description", content: "A powerful Nuxt 3 application" },
      ],
      link: [
        { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      ],
    },
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "layout", mode: "out-in" },
  },
  
  // Modules
  modules: [
    "@nuxtjs/tailwindcss",
    "@pinia/nuxt",
    "@vueuse/nuxt",
    "@nuxt/image",
    "@nuxtjs/i18n",
  ],
  
  // Nitro server configuration
  nitro: {
    preset: "node-server", // or "vercel", "netlify", "cloudflare"
    
    compressPublicAssets: true,
    
    // Enable response compression
    minify: true,
    
    // Route rules for hybrid rendering
    routeRules: {
      // Static pages - prerender at build time
      "/": { prerender: true },
      "/about": { prerender: true },
      "/pricing": { prerender: true },
      
      // ISR - regenerate every hour
      "/blog/**": { isr: 3600 },
      "/products/**": { isr: 1800 },
      
      // SPA mode for dashboard
      "/dashboard/**": { ssr: false },
      
      // API caching
      "/api/**": { 
        cors: true,
        headers: { "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE" },
      },
      "/api/public/**": { 
        cache: { maxAge: 60 },
      },
    },
    
    // Storage configuration
    storage: {
      cache: {
        driver: "redis",
        url: process.env.REDIS_URL,
      },
    },
  },
  
  // Build optimizations
  vite: {
    build: {
      cssCodeSplit: true,
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ["vue", "vue-router", "pinia"],
            utils: ["lodash-es", "date-fns"],
          },
        },
      },
    },
  },
  
  // Experimental features
  experimental: {
    payloadExtraction: true,
    renderJsonPayloads: true,
    componentIslands: true,
  },
});
```

## Server API Routes

Create robust API endpoints:

```typescript
// server/api/users/[id].get.ts
import { defineEventHandler, getRouterParam, createError } from "h3";
import { z } from "zod";

const userSchema = z.object({
  id: z.string().uuid(),
});

export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, "id");
  
  // Validate input
  const result = userSchema.safeParse({ id });
  if (!result.success) {
    throw createError({
      statusCode: 400,
      statusMessage: "Invalid user ID",
    });
  }
  
  // Fetch user from database
  const user = await prisma.user.findUnique({
    where: { id: result.data.id },
    select: {
      id: true,
      name: true,
      email: true,
      avatar: true,
      createdAt: true,
    },
  });
  
  if (!user) {
    throw createError({
      statusCode: 404,
      statusMessage: "User not found",
    });
  }
  
  return user;
});

// server/api/users/index.post.ts
import { defineEventHandler, readBody, createError } from "h3";
import { z } from "zod";
import bcrypt from "bcryptjs";

const createUserSchema = z.object({
  name: z.string().min(2).max(100),
  email: z.string().email(),
  password: z.string().min(8),
});

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  
  const result = createUserSchema.safeParse(body);
  if (!result.success) {
    throw createError({
      statusCode: 400,
      statusMessage: "Validation failed",
      data: result.error.flatten(),
    });
  }
  
  // Check if user exists
  const existing = await prisma.user.findUnique({
    where: { email: result.data.email },
  });
  
  if (existing) {
    throw createError({
      statusCode: 409,
      statusMessage: "Email already registered",
    });
  }
  
  // Create user
  const hashedPassword = await bcrypt.hash(result.data.password, 12);
  
  const user = await prisma.user.create({
    data: {
      name: result.data.name,
      email: result.data.email,
      password: hashedPassword,
    },
    select: {
      id: true,
      name: true,
      email: true,
      createdAt: true,
    },
  });
  
  return user;
});
```

## Server Middleware

Implement authentication middleware:

```typescript
// server/middleware/auth.ts
import { defineEventHandler, getHeader, createError } from "h3";
import { verifyToken } from "~/server/utils/jwt";

export default defineEventHandler(async (event) => {
  // Skip auth for public routes
  const publicPaths = ["/api/auth/login", "/api/auth/register", "/api/public"];
  const path = event.path;
  
  if (publicPaths.some((p) => path.startsWith(p))) {
    return;
  }
  
  // Skip for non-API routes
  if (!path.startsWith("/api/")) {
    return;
  }
  
  const authorization = getHeader(event, "Authorization");
  
  if (!authorization?.startsWith("Bearer ")) {
    throw createError({
      statusCode: 401,
      statusMessage: "Missing authorization header",
    });
  }
  
  const token = authorization.slice(7);
  
  try {
    const payload = await verifyToken(token);
    event.context.user = payload;
  } catch (error) {
    throw createError({
      statusCode: 401,
      statusMessage: "Invalid or expired token",
    });
  }
});
```

## Docker Deployment

Create production Docker setup:

```dockerfile
# Dockerfile
FROM node:20-alpine AS base
RUN corepack enable pnpm

# Dependencies stage
FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# Build stage
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ARG NUXT_PUBLIC_API_BASE
ARG NUXT_PUBLIC_APP_URL

ENV NUXT_PUBLIC_API_BASE=${NUXT_PUBLIC_API_BASE}
ENV NUXT_PUBLIC_APP_URL=${NUXT_PUBLIC_APP_URL}

RUN pnpm build

# Production stage
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production

RUN addgroup --system --gid 1001 nuxt
RUN adduser --system --uid 1001 nuxt

COPY --from=builder --chown=nuxt:nuxt /app/.output ./

USER nuxt

EXPOSE 3000

CMD ["node", "server/index.mjs"]
```

```yaml
# docker-compose.yml
version: "3.9"

services:
  app:
    build:
      context: .
      args:
        - NUXT_PUBLIC_API_BASE=${NUXT_PUBLIC_API_BASE}
        - NUXT_PUBLIC_APP_URL=${NUXT_PUBLIC_APP_URL}
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=${DATABASE_URL}
      - REDIS_URL=redis://redis:6379
    depends_on:
      - redis
    restart: always

  redis:
    image: redis:7-alpine
    volumes:
      - redis_data:/data
    restart: always

volumes:
  redis_data:
```

## Vercel Deployment

Configure for Vercel:

```json
// vercel.json
{
  "buildCommand": "pnpm build",
  "outputDirectory": ".output",
  "framework": "nuxt",
  "regions": ["iad1", "sfo1"],
  "functions": {
    "api/**/*.ts": {
      "memory": 1024,
      "maxDuration": 30
    }
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        }
      ]
    }
  ]
}
```

Google Antigravity generates production-ready Nuxt 3 configurations with optimized SSR, hybrid rendering, and deployment patterns for scalable applications.