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.

Lesson 4 of 414 steps

Deployment: Static vs SSR is a free Frontend Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 41
Lessons: 163

Start learning free View the full course

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. 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. The Frontend Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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