Frontend Academy · Lesson

Deployment: Static vs SSR

Generate a fully static site with nuxt generate, deploy an SSR app to a Node server or edge runtime, and configure the Nuxt nitro engine.

Deployment: Static vs SSR is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Nuxt Renders Anywhere

Nuxt 3 supports four deployment modes: Static (nuxt generate), SSR (Node server), Edge (Cloudflare Workers, Vercel Edge), Hybrid (per-route).

Static Deployment

nuxt generate pre-renders every route to HTML files. Deploy the .output/public folder to any static host (Netlify, Vercel, GitHub Pages, S3).

npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...

# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/

Generating Dynamic Routes

For routes like /blog/[slug], Nuxt needs to know all slugs. Provide them via nitro.prerender.routes in config.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
    }
  }
});

// Or auto-discover: Nitro follows links from /, generating any it finds.

SSR Deployment to Node

nuxt build creates a Nitro server. Deploy to any Node host (Render, Railway, Fly.io, your VPS) by running node .output/server/index.mjs.

npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets

node .output/server/index.mjs # starts on PORT (default 3000)

Nitro — The Universal Server

Nuxt 3's server is Nitro — a portable engine that targets any runtime: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify, AWS Lambda. Switch targets with nitro.preset.

Edge Deployment (Cloudflare Workers)

Set the preset to cloudflare-pages or cloudflare. Build outputs a Worker that runs on Cloudflare's edge.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'cloudflare-pages' }
});

// Build, then:
npx wrangler pages deploy ./dist

Edge Deployment (Vercel Edge)

Vercel auto-detects Nuxt and uses the right preset. To force Edge Runtime: preset: 'vercel-edge'.

Hybrid Rendering

Different routes can render differently. Configure with routeRules.

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':           { prerender: true },        // SSG
    '/blog/**':    { isr: 60 },                // ISR every 60s
    '/dashboard/**': { ssr: false },           // SPA (client-only)
    '/admin/**':   { ssr: true }               // SSR (per-request)
  }
});

Choosing Static vs SSR

Static: content rarely changes, max speed, cheap CDN hosting (blogs, marketing, docs). SSR: per-user content, dynamic data, search results (dashboards, e-commerce). Hybrid lets you mix per-route.

Environment Variables

Use the runtimeConfig in nuxt.config.ts. public is exposed to the client; the rest stays server-only.

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '',         // server-only, set via NUXT_API_SECRET env
    public: {
      apiBase: 'https://api.example.com' // accessible client-side
    }
  }
});

// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);

Build Caching in CI

Cache .nuxt/ and node_modules/ between CI runs to speed up builds. On Vercel/Netlify, this is automatic.

Performance Testing

After deploy, run Lighthouse against the deployed URL — not localhost. Real CDN, real edge locations, real CPU throttling.

Quick Check

Which Nuxt 3 command pre-renders all routes to static HTML for deployment to a CDN like Netlify or Cloudflare Pages?

Recap: Nuxt Deployment

nuxt generate → static (deploy .output/public). nuxt build → SSR (deploy with Node). Nitro presets target Cloudflare, Vercel, Netlify, AWS, etc. routeRules for hybrid rendering (prerender, isr, ssr, spa per-route). runtimeConfig for env vars (public exposed to client). Test with Lighthouse against the deployed URL.

Frequently asked questions

Is the “Deployment: Static vs SSR” lesson free?

Yes — the full text of “Deployment: Static vs SSR” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Deployment: Static vs SSR”?

Generate a fully static site with nuxt generate, deploy an SSR app to a Node server or edge runtime, and configure the Nuxt nitro engine. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Deployment: Static vs SSR” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy