Frontend Academy · Lektion

Deployment: Statisch vs. SSR

Deployment: Statisch vs. SSR ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Nuxt rendert überall

Nuxt 3 unterstützt vier Bereitstellungsmodi: statisch (nuxt generate), SSR (Node-Server), Edge (Cloudflare Workers, Vercel Edge) und hybrid (pro Route).

Statische Bereitstellung

nuxt generate rendert jede Route vorab als HTML-Datei. Stellen Sie den Ordner .output/public bei einem beliebigen Static Host (Netlify, Vercel, GitHub Pages, S3) bereit.

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/

Dynamische Routen generieren

Für Routen wie /blog/[slug] muss Nuxt alle Slugs kennen. Geben Sie sie über nitro.prerender.routes in der Konfiguration an.

// 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-Bereitstellung auf Node

nuxt build erstellt einen Nitro-Server. Stellen Sie ihn auf einem beliebigen Node-Host (Render, Railway, Fly.io, Ihrem VPS) bereit, indem Sie node .output/server/index.mjs ausführen.

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 — Der universelle Server

Der Server von Nuxt 3 ist Nitro — eine portable Engine, die auf jede Laufzeitumgebung abzielt: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify und AWS Lambda. Wechseln Sie das Ziel mit nitro.preset.

Edge-Bereitstellung (Cloudflare Workers)

Setzen Sie das Preset auf cloudflare-pages oder cloudflare. Der Build erzeugt einen Worker, der am Edge von Cloudflare ausgeführt wird.

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

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

Edge-Bereitstellung (Vercel Edge)

Vercel erkennt Nuxt automatisch und verwendet das passende Preset. Um die Edge-Runtime zu erzwingen: preset: 'vercel-edge'.

Hybrides Rendering

Verschiedene Routen können unterschiedlich gerendert werden. Konfigurieren Sie dies mit 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)
  }
});

Statisch oder SSR auswählen

Statisch: Inhalte ändern sich selten, maximale Geschwindigkeit und günstiges CDN-Hosting (Blogs, Marketing, Dokumentation). SSR: benutzerspezifische Inhalte, dynamische Daten und Suchergebnisse (Dashboards, E-Commerce). Mit Hybrid können Sie die Modi pro Route kombinieren.

Umgebungsvariablen

Verwenden Sie runtimeConfig in nuxt.config.ts. public wird für den Client offengelegt; der übrige Teil bleibt ausschließlich auf dem Server verfügbar.

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

Cached Sie .nuxt/ und node_modules/ zwischen CI-Läufen, um Builds zu beschleunigen. Bei Vercel und Netlify geschieht dies automatisch.

Performance testen

Führen Sie nach der Bereitstellung Lighthouse für die bereitgestellte URL aus — nicht für localhost. So testen Sie ein echtes CDN, echte Edge-Standorte und eine echte CPU-Drosselung.

Kurzer Check

Welcher Nuxt-3-Befehl rendert alle Routen vorab als statisches HTML für die Bereitstellung bei einem CDN wie Netlify oder Cloudflare Pages?

Zusammenfassung: Nuxt-Bereitstellung

nuxt generate → statisch (Bereitstellung von .output/public). nuxt build → SSR (Bereitstellung mit Node). Nitro-Presets zielen auf Cloudflare, Vercel, Netlify, AWS usw. routeRules dienen dem hybriden Rendering (prerender, isr, ssr, spa pro Route). runtimeConfig ist für Umgebungsvariablen vorgesehen (public wird für den Client offengelegt). Testen Sie mit Lighthouse gegen die bereitgestellte URL.

Häufig gestellte Fragen

Ist die Lektion „Deployment: Statisch vs. SSR“ kostenlos?

Ja — der vollständige Text von „Deployment: Statisch vs. SSR“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Deployment: Statisch vs. SSR“?

Generieren Sie mit nuxt generate eine vollständig statische Website, stellen Sie eine SSR-App auf einem Node-Server oder in einer Edge-Laufzeitumgebung bereit und konfigurieren Sie die Nuxt-Nitro-Eng… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Deployment: Statisch vs. SSR“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Dateibasiertes Routing und automatische Imports
useFetch und useAsyncData
Nuxt-Module: Image, Auth und i18n
Deployment: Statisch vs. SSR

← Zurück zu Frontend Academy